用jquery写的json省市县三级联动下拉

[html] view plain copy

1. <form action="#" name="myform">  
2.     <label>省</label><select name="provice" id="provice"><option value="-1">请输入省份</option></select>  
3.     <label>市</label><select name="city" id="city"><option value="-1">请输入城市</option></select>  
4.     <label>县</label><select name="locale" id="locale"><option value="-1">请输入区县</option></select>  
5. </form>  

2. 定义json数据源：

[javascript] view plain copy

1. var jsonData = [{  
2.     treeNode : '请输入省份',  
3.     value : -1,  
4.     childNode : [{  
5.     treeNode : '请输入城市',  
6.     value : -1,  
7.     childNode : [{  
8.             treeNode : '请输入区县',  
9.         value : -1,  
10.         childNode : []   
11.     }]  
12.     }]    
13. },{  
14.     treeNode : '北京',  
15.     value : 1,  
16.     childNode : [{  
17.     treeNode : '东城区',  
18.     value : 11,  
19.     childNode : []  
20.     },{  
21.     treeNode : '西城区',  
22.     value : 12,  
23.     childNode : []  
24.     }]  
25. },{  
26.     treeNode : '广西壮族自治区',  
27.     value : 2601,  
28.     childNode : [{  
29.     treeNode : '南宁',  
30.     value : 6653,  
31.     childNode : [{  
32.         treeNode : '横县',  
33.         value : 10799,  
34.         childNode : []  
35.     }, {  
36.         treeNode : '宾阳县',  
37.         value : 10800,  
38.         childNode : []  
39.         }]  
40.     }]  
41. }]  

3. javascript代码：

[javascript] view plain copy

1. function initCountry(){  
2.     var provice = $("#provice");  
3.     var city = $("#city");  
4.     var locale = $("#locale");  
5.     var proviceStr = "";  
6.     $.each(<span style="color:#FF0000;">jsonData</span>,function(index,items){  
7.         proviceStr += "<option value='"+jsonData[index].value+"'>"+jsonData[index].treeNode+"</option>";  
8.     });  
9.     provice.empty().append(proviceStr);  
10.     provice.bind("change",function(){  
11.         if($(this).find(":selected").attr("value") == -1){        
12.             city.empty().append("<option value='-1'>请输入区县</option>");  
13.         }  
14.     });  
15.     provice.bind("change",function(){  
16.         var cityStr = '';  
17.         var index = provice.find(":selected").index();  
18.         $.each(jsonData[index].childNode,function(index,items){  
19.             city.empty();  
20.             cityStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";  
21.             city.append(cityStr);  
22.         })  
23.         changeLocale();  
24.     });  
25.     city.bind("change",changeLocale);  
26.     function changeLocale(){  
27.         var localeStr = '';  
28.         var index = provice.find(":selected").index();  
29.         var index2 = city.find(":selected").index();  
30.         $.each(jsonData[index].childNode[index2].childNode,function(index,items){  
31.             locale.empty();  
32.             localeStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";  
33.             locale.append(localeStr);  
34.         })  
35.         if(localeStr == ''){  
36.             locale.empty();  
37.             locale.append("<option value='-11'>请输入区县</option>");  
38.         }  
39.     }  
40. }  
41. $(function(){  
42.     initCountry();  
43.       
44. })