一个页面如何实现两个省市区镇五级联动呢？因为是做后端的js没怎么学过

Z时代
2024-01-10
分类：技术分享

如何实现在同一个页面上，有两个五级联动？

这两个五级联动不是我自己写的代码在百度上面搜出来的

出现这个问题的时候我试过从新创建一个js的文件引入这个js文件却还是不行然后我在网上搜了下有些人说一个页面不可以存在两个五级联动

这个是左边的代码👇
var s=["s1","s2","s3","s4","s5"];

var opt0 = ["--省--","--市--","--区--","--镇--","--乡--"];

function setup()
{
for(i=0;i<s.length-1;i++)

document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");

change(0);
}
`function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined")

return false;

return true;
}
function change(v)
{
var str="0";
for(i=0;i<v;i++)
{

str+=("_"+(document.getElementById(s[i]).selectedIndex-1));

};
var ss=document.getElementById(s[v]);
with(ss)
{

length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v)
{
if(dsy.Exists(str))
{
ar = dsy.Items[str];
for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]);
if(v)options[1].selected = true;
}
}
if(++v<s.length)
{
change(v);}

}
}

var dsy = new Dsy();
// 省份
dsy.add("0",["广东省"]);
// 市
dsy.add("0_0",["广州市","佛山市"]);
// 区
dsy.add("0_0_0",["白云区","越秀区"]);
// 镇
dsy.add("0_0_0_0",["石井镇","新市镇","钟落谭镇"]);
dsy.add("0_0_0_1",["石井镇","新市镇","钟落谭镇"]);
// 乡
dsy.add("0_0_0_0_0",["新元新村"]);
dsy.add("0_0_0_0_1",["新元新村","新元新村"]);
dsy.add("0_0_0_0_2",["新元新村"]);
dsy.add("0_0_0_1_0",["新元新村","新元新村"]);`

这个是右边的代码👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{font-size:14px;}
select{height:20px;font-size:12px;}
</style>
</head>
<body>
<div id='demo4'></div>
</body>
</html>
<script type="text/javascript">
var Sys = (function(ua){
var s = {};
s.IE = ua.match(/msie ([d.]+)/)?true:false;
s.Firefox = ua.match(/firefox/([d.]+)/)?true:false;
s.Chrome = ua.match(/chrome/([d.]+)/)?true:false;
s.IE6 = (s.IE&&([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;
s.IE7 = (s.IE&&([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;
s.IE8 = (s.IE&&([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;
return s;
})(navigator.userAgent.toLowerCase());
Sys.IE6&&document.execCommand("BackgroundImageCache", false, true);
function $(Id){
return document.getElementById(Id);
};
function $$(p,e){
return p.getElementsByTagName(e);
};
function addListener(element,e,fn){
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
};
function removeListener(element,e,fn){
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
};
};
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
};
};
var Extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
};
};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
//==========================================================================================================================
var Selects = new Class({
initialize :function(container,data,title){
this.container  = container;
this.num = title.length;
this.Events = new Array(title.length-1);
var i,l,select;
for(i=0; i<this.num ; i++)
{
container.innerHTML = container.innerHTML + "　" + title[i];
container.appendChild(document.createElement('select'));
}
select = $$(container,'select')[0];
for(i=0,l=data.length;i<l;i++)
select.options.add(new Option(data[i].txt,i));
addListener(select,'change',Bind(this,this.Change,select,data,0));
this.Change(select,data,0);
},
Change : function(obj,data,num){
if(num == this.num-1)return;
var menu = data[obj.value].menu;
select = $$(this.container,'select')[num+1];
select.length = 0;
if(!menu)return;
if(this.Events[num]!=undefined)removeListener(select,'change',this.Events[num])
this.Events[num] = Bind(this,this.Change,select,menu,num+1)
addListener(select,'change',this.Events[num]);
for(var i=0,l=menu.length;i<l;i++)
select.options.add(new Option(menu[i].txt,i));
this.Change(select,menu,num+1);
}
});
//==========================================================================================================================
window.onload = function(){
var data = [{
"txt": "广东省",
"menu": [{
"txt": "广州市",
"menu": [{
"txt": "白云区",
"menu": [
{
"txt": "",
"menu": [{
"txt": ""
}]
}, {
"txt": "",
"menu": [{
"txt": ""
}, {
"txt": ""
}]
}, {
"txt": "",
"menu": [{
"txt": ""
}]
}, {
"txt": "",
"menu": [{
"txt": "22"
}]
}, {
"txt": "",
"menu": [{
"txt": "33"
}]
}, {
"txt": "",
"menu": [{
"txt": "44"
}]
}, {
"txt": "",
"menu": [{
"txt": "55"
}]
}, {
"txt": "",
"menu": [{
"txt": "66"
}]
}
]
}, {
"txt": "越秀区",
"menu": [{
"txt": "",
"menu": [{
"txt": ""
}]
}, {
"txt": "六榕街道"
}, {
"txt": "流花街道"
}, {
"txt": "光塔街道"
}, {
"txt": "人民街道"
}, {
"txt": "东山街道"
}, {
"txt": "农林街道"
}, {
"txt": "大东街道"
}, {
"txt": "大塘街道"
}, {
"txt": "珠光街道"
}, {
"txt": "白云街道"
}, {
"txt": "建设街道"
}, {
"txt": "华乐街道"
}, {
"txt": "梅花村街道"
},{
"txt": "黄花岗街道"
},{
"txt": "矿泉街道"
},{
"txt": "登峰街道"
}]
},{
"txt": "荔湾区",
"menu": [{
"txt": "1"
}]
},{
"txt": "海珠区",
"menu": [{
"txt": "2"
}]
},{
"txt": "天河区",
"menu": [{
"txt": "3"
}]
},{
"txt": "黄埔区",
"menu": [{
"txt": "4"
}]
},{
"txt": "番禺区",
"menu": [{
"txt": "5"
}]
},{
"txt": "花都区",
"menu": [{
"txt": "6"
}]
},{
"txt": "南沙区",
"menu": [{
"txt": "7"
}]
},{
"txt": "从化区",
"menu": [{
"txt": "8"
}]
},{
"txt": "增城区",
"menu": [{
"txt": "9"
}]
}]
}, {
"txt": "佛山市",
"menu": [{
"txt": "禅城区",
"menu": [{
"txt": "南庄镇"
}, {
"txt": "祖庙"
}, {
"txt": "石湾镇"
}, {
"txt": "张槎"
}]
}, {
"txt": "顺德区",
"menu": [{
"txt": "大良街道"
}, {
"txt": "容桂街道"
}, {
"txt": "伦教街道"
}, {
"txt": "陈村镇"
}]
}]
}, {
"txt": "湛江市",
"menu": [{
"txt": "赤坎区",
"menu": [{
"txt": "光"
}, {
"txt": "无敌"
}, {
"txt": "光环"
}, {
"txt": "复活"
}]
}, {
"txt": "英雄说明",
"menu": [{
"txt": "力量英雄"
}, {
"txt": "辅助英雄"
}, {
"txt": "人称奶妈"
}]
}]
}, {
"txt": "血法师",
"menu": [{
"txt": "血法技能",
"menu": [{
"txt": "火焰"
}, {
"txt": "吸蓝"
}, {
"txt": "虚无"
}, {
"txt": "神鸟凤凰"
}]
}, {
"txt": "英雄说明",
"menu": [{
"txt": "智力英雄"
}, {
"txt": "辅助英雄"
}, {
"txt": "长的很帅"
}]
}]
}]
}, {
"txt": "广西壮族自治区",
"menu": [{
"txt": "贱圣",
"menu": [{
"txt": "贱圣技能",
"menu": [{
"txt": "疾风步"
}, {
"txt": "影分身"
}, {
"txt": "致命一击"
}, {
"txt": "剑刃风暴"
}]
}, {
"txt": "英雄说明",
"menu": [{
"txt": "敏捷英雄"
}, {
"txt": "高攻英雄"
}, {
"txt": "杀人越货"
}, {
"txt": "猥亵无敌"
}, {
"txt": "非常强大"
}]
}]
}, {
"txt": "先知男",
"menu": [{
"txt": "先知技能",
"menu": [{
"txt": "狼"
}, {
"txt": "日"
}, {
"txt": "闪电链"
}, {
"txt": "地震"
}]
}, {
"txt": "英雄说明",
"menu": [{
"txt": "智力英雄"
}, {
"txt": "骚扰英雄"
}]
}]
}, {
"txt": "牛头人酋长",
"menu": [{
"txt": "牛头技能",
"menu": [{
"txt": "冲击波"
}, {
"txt": "阵地"
}, {
"txt": "耐久光环"
}, {
"txt": "复活"
}]
}, {
"txt": "英雄说明",
"menu": [{
"txt": "力量英雄"
}, {
"txt": "魔法强大"
}, {
"txt": "长的威猛"
}, {
"txt": "一个肉盾"
}]
}]
}, {
"txt": "小YY",
"menu": [{
"txt": "小Y技能",
"menu": [{
"txt": "变动物"
}, {
"txt": "治疗波"
}, {
"txt": "小蛇棒子"
}, {
"txt": "全体无敌"
}]
}, {
"txt": "英雄说明",
"menu": [{
"txt": "敏捷英雄"
}, {
"txt": "魔法强大"
}, {
"txt": "辅助英雄"
}]
}]
}]
}, {
"txt": "海南省",
"menu": [{
"txt": "死亡骑士",
"menu": [{
"txt": "亡骑技能",
"menu": [{
txt: "大便一拓"
}, {
txt: "邪恶光环"
}, {
txt: "死亡契约"
}, {
txt: "复活亡灵"
}]
}, {
"txt": "英雄说明",
"menu": [{
txt: "骑的是羊"
}, {
txt: "未老先衰"
}, {
txt: "冰霜之哀"
}, {
txt: "啊而塞思"
}]
}]
}, {
"txt": "巫妖",
"menu": [{
"txt": "巫妖技能",
"menu": [{
txt: "暴冰"
}, {
txt: "冰甲"
}, {
txt: "契约"
}, {
txt: "死亡凋零"
}]
}, {
"txt": "英雄说明",
"menu": [{
txt: "穿裙子"
}, {
txt: "全是骨头"
}, {
txt: "不男不女"
}]
}]
}, {
"txt": "恐惧魔王",
"menu": [{
"txt": "魔王技能"
}, {
"txt": "英雄说明"
}]
}, {
"txt": "小强王子",
"menu": [{
"txt": "王子技能"
}, {
"txt": "英雄说明"
}]
}]
}];
new Selects($('demo4'),data,["","","","",""]);
}</script>