3.省市区，三级联动（优化版） 

 1 <body onload="change()">
 2     <form>
 3         <select onchange="sel_one()">
 4         </select>
 5         <select onchange="sel_two()">
 6             <option>请选择所在的城市</option>
 7         </select>
 8         <select>
 9             <option>请选择所在的县区</option>
10         </select>
11     </form>
12     <script>
13         var select = document.getElementsByTagName('select');
14         var sel_1 = select[0];
15         var sel_2 = select[1];
16         var sel_3 = select[2];
17         var oAjax = new XMLHttpRequest();
18         var c = '';
19         function change() {
20             oAjax.open('GET', 'json/city.json', true);
21             oAjax.send();
22             oAjax.onreadystatechange = function () {
23                 if (oAjax.readyState == 4 && oAjax.status == 200) {
24                     c = JSON.parse(oAjax.responseText);
25                     var option_1 = '<option>请选择所在的省市</option>';
26                     for (var i = 0; i < c.city.length; i++) {
27                         option_1 += '<option>' + c.city[i].name + '</option>';
28                     }
29                     sel_1.innerHTML = option_1;
30                 }
31             }
32         }
33         function sel_one() {
34             sel_1.firstElementChild.style.display = 'none';
35             sel_3.innerHTML = '<option>请选择所在的县区</option>';
36             var index = sel_1.selectedIndex - 1;
37             if (sel_1.value == c.city[index].name) {
38                 var option_2 = '';
39                 for (var i = 0; i < c.city[index].city.length; i++) {
40                     option_2 += '<option>' + c.city[index].city[i].name + '</option>';
41                 }
42                 sel_2.innerHTML = option_2;
43             }
44             sel_two();
45         }
46         function sel_two() {
47             var index = sel_1.selectedIndex - 1;
48             var index2 = sel_2.selectedIndex;
49             if (sel_2.value == c.city[index].city[index2].name) {
50                 var option_3 = ''
51                 for (var i = 0; i < c.city[index].city[index2].area.length; i++) {
52                     option_3 += '<option>' + c.city[index].city[index2].area[i] + '</option>';
53                 }
54                 sel_3.innerHTML = option_3;
55             }
56         }
57     </script>
58 </body>

 

posted @ 2019-05-13 13:57  [蒙面大侠缺颗牙]  阅读(462)  评论(0)    收藏  举报