欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生javascript AJAX 三级联动

程序员文章站 2022-03-24 18:36:40
1 2 3 4 5 js原生ajax 6 7 8 11 14 15 69 70 ......
 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>