原生javascript AJAX 三级联动
程序员文章站
2022-06-30 15:09:08
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>
上一篇： JavaScript深入之作用域链
下一篇： 自适应宽度元素单行文本省略用法探究