给园子种花种菜

导航

基于JSON的级联列表实现

html代码:

1 <select id="provice" onChange="setCity()">
2     <option value="">--请选择省份--</option>
3 </select>
4 
5 <select id="city">
6     <option value="">--请选择城市--</option>
7 </select>

JS代码:

 1 var provideJson = {"1":"河北省","2":"直辖市"};
 2 var cityJson = {"1":{"01":"石家庄市","02":"衡水市","03":"邯郸市","04":"邢台市","05":"正定市"},"2":{"001":"北京市","002":"上海市","003":"天津市","004":"重庆市"}};
 3 window.onload=function()
 4 {
 5     var proSel = document.getElementById("provice");
 6     for(tmp in provideJson)
 7     {
 8          proSel.add(new Option(provideJson[tmp],tmp));    
 9     }        
10 }
11 function setCity()
12 {
13    var proVal = document.getElementById("provice").value;
14    var city = document.getElementById("city");
15    city.options.length=1;
16    if(proVal == "") return;
17    for(temp in cityJson[proVal])
18    {
19         console.info(cityJson[proVal][temp]);    
20         city.add(new Option(cityJson[proVal][temp],temp));
21    }            
22 }

 

posted on 2015-09-22 11:14  给园子种花种菜  阅读(262)  评论(0编辑  收藏  举报