<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script>
/*使用 HTML DOM 的方式实现联动菜单*/
var categories=[
{"id":10,"name":'男装',"children":[
{"id":101,"name":'正装'},
{"id":102,"name":'T恤'},
{"id":103,"name":'裤衩'}
]},
{"id":20,"name":'女装',"children":[
{"id":201,"name":'短裙'},
{"id":202,"name":'连衣裙'},
{"id":203,"name":'裤子',"children":[
{"id":2031,"name":'长裤'},
{"id":2031,"name":'九分裤'},
{"id":2031,"name":'七分裤'}
]},
]},
{"id":30,"name":'童装',"children":[
{"id":301,"name":'帽子'},
{"id":302,"name":'套装',"children":[
{"id":3021,"name":"0-3岁"},
{"id":3021,"name":"3-6岁"},
{"id":3021,"name":"6-9岁"},
{"id":3021,"name":"9-12岁"}
]},
{"id":303,"name":'手套'}
]}
];
function createSel(cts){//传入包含一组类别对象的数组
//创建select元素，保存在变量sel中
var sel=document.createElement("select");
//向sel添加一个新option，设置内容为"-请选择-",值为-1
sel.add(new Option("-请选择-",-1));
//遍历cts中的每个类别对象
for(var i=0;i<cts.length;i++){
//向sel中添加一个新option，设置内容为当前类别的内容，设置值为当前类别的id
sel.add(new Option(cts[i].name,cts[i].id));
}//(遍历结束)
//cts:[{男装,},{女装,},{童装,children:[{sub1},...]
// i-1
sel.onchange=function(){//this->sel
//获得当前sel选中项的下标，保存在变量i中
var i=this.selectedIndex;
//获得cts中下标为i-1位置的子类型对象,保存在cate中
var cate=cts[i-1];
//反复删除category下的最后一个子节点，直到category的最后一个子节点就是当前sel时，退出循环
while(category.lastChild!=this){
category.removeChild(category.lastChild);
}
if(cate.children){//如果cate有children属性
//调用createSel，传入cate的children数组作为参数
createSel(cate.children);
}
}
//将sel追加到id为category的元素中
category.appendChild(sel);
}
window.onload=function(){
createSel(categories);
}
</script>
</head>
<body>
<div id="category"></div>
</body>
</html>
var data = {
"province": ["广东省","山东省","西安"],
"city":{
"广东省":["韶关市1","韶关市2","韶关市3","韶关市4","韶关市"],
"山东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],
"西安":["韶关市66","韶关市77","韶关市88","韶关市99","韶关市"],
}
}
var Pro1='';
for(var i=0;i<data.province.length;i++){
Pro1+='<option value="">'+data.province[i]+'</option>';
}
$("#province").on('change',function(){
var oCity=document.getElementById('city');
oCity.innerHTML='<option>市</option>';
var City1='';
var City2=$('#province').children('option:selected').text();
for(var city_1 in data.city){
if(City2==city_1){
for(var i=0;i<data.city[city_1].length;i++){
City1+='<option value="">'+ data.city[city_1][i] +'</option>';
}
$('#city').append(City1);
}
}
})
$('#province').append(Pro1);
