原生javascript AJAX 三级联动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js原生ajax</title>
 6 </head>
 7 <body>
 8     <select name="sel1">
 9         <option value="" >-请选择 省/直辖市/自治区-</option>
10     </select>
11     <select name="sel2">
12         <option value="" >-请选择 市-</option>
13     </select>
14     <input type="text" value="" id="int"/>
15     <script>
16         var sel1 = document.getElementsByName('sel1')[0];
17         var sel2 = document.getElementsByName('sel2')[0];
18         var ints = document.getElementById('int');
19         // 创建请求对象
20         var a = new XMLHttpRequest();
21         // 初始化
22         a.open('get','city.json','true');
23         // 发送
24         a.send();
25         //readySate 状态码 交互进行到了哪一步
26         //0：请求未初始化
27         //1：服务器链接已建立
28         //2：请求已经接受
29         //3：请求处理中
30         //4：请求已经完成，且响应已就绪
31         //status 交互是否成功
32         a.onreadystatechange = function(){
33             if(a.status ==200||a.status == 304){
34                 if(a.readyState == 4){
35                     var obj = JSON.parse(a.response);//responseText:获得字符串形式的响应数据。
36                     var b = obj.城市代码;
37                     for(var i = 0;i<b.length;i++){
38                         var nOpt = document.createElement('option');
39                         var nOpt_t =document.createTextNode(b[i].省);
40                         nOpt.appendChild(nOpt_t);
41                         sel1.appendChild(nOpt);
42                         nOpt.value = i;
43                         console.log(ints.value)
44                     }
45                     sel1.onchange = function (){
46                         var index = sel1.selectedIndex;    //获取select选择的option的下标值
47                         var va = sel1.options[index].value//获取select第几个option的value值
48                         var city = b[va].市;        //获取他下边的市
49                         sel2.options.length = 1;    //清空所有的select下的option的值
50                         for(var i = 0;i<city.length;i++){
51                             var nOpt = document.createElement('option');
52                             var nOpt_t =document.createTextNode(city[i].市名);
53                             nOpt.appendChild(nOpt_t);
54                             sel2.appendChild(nOpt);
55                             nOpt.value = i;
56                             ints.value = "";
57                         }
58                     }
59                     sel2.onchange = function (){
60                         var sel1v = sel1.value;
61                         var sel2v = sel2.value;
62                         var intsi = b[sel1v]['市'][sel2v]['编码'];
63                         ints.value = intsi;
64                     }
65                 }
66             }
67         }
68     </script>
69 </body>
70 </html>
原生javascript AJAX 三级联动

猜你喜欢
