如何实现在同一个页面上，有两个五级联动？
这两个五级联动不是我自己写的代码 在百度上面搜出来的
出现这个问题的时候 我试过从新创建一个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
