jQuery之省市区，三级联动（优化版）教程-职坐标

jQuery之省市区，三级联动（优化版）教程

从安 2019-06-25 来源：阅读 2641 评论 0

摘要：本篇文章主要讲述jQuery之省市区，三级联动（优化版）教程，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章主要讲述jQuery之省市区，三级联动（优化版）教程，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

jQuery之省市区，三级联动（优化版）教程

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>

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！

jquery实战第三版 jquery实战教程下载 jquery官网

本文由 @从安发布于职坐标。未经许可，禁止转载。