基于JSON的级联列表实现

最新推荐文章于 2024-02-27 22:37:00 发布

weixin_30421809

最新推荐文章于 2024-02-27 22:37:00 发布

阅读量189

点赞数

文章标签： json java 数据库

原文链接：http://www.cnblogs.com/grnBlogs/p/4828369.html

版权

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.οnlοad=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 }