js级联菜单

来源：互联网发布：淘宝网前任总裁编辑：程序博客网时间：2024/06/15 03:34

var data=[

{id:1,

name:"云南",

city:[

{id:11,name:"昆明"},

{id:12,name:"呈贡"},

{id:13,name:"曲靖"},

{id:14,name:"玉溪"}

]

{id:2,

name:"四川",

city:

[

{id:21,name:"攀枝花"},

{id:22,name:"锦阳"},

{id:22,name:"成都"}

{id:22,name:"卧龙"}

]

{id:3,

name:"湖南",

city:

[

{id:31,name:"长沙"},

{id:32,name:"岳阳"},

{id:33,name:"衡阳"},

{id:34,name:"益阳"}

]

{id:4,

name:"浙江",

city:

[

{id:41,name:"杭州"},

{id:42,name:"厦门"},

{id:43,name:"泉州"},

{id:44,name:"福州"}

]

}

];

varpro=document.getElementById("p");

varcit=document.getElementById("c");

pro.innerHTML="";

for(vari=0,len=data.length;i<len;i++){

var op=document.createElement("option");

op.value=data[i].id;

op.innerHTML=data[i].name;

pro.appendChild(op);

}

pro.onchange=function(){

cit.innerHTML="";

var citys=data[pro.value-1].city;

for(var i=0,len=citys.length;i<len;i++){

var op=document.createElement("option");

op.value=citys[i].id;

op.innerHTML=citys[i].name;

cit.appendChild(op);

}

0 0