Native javascript AJAX three-level linkage

 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];
var17         sel2 = document.getElementsByName( ' sel2 ' )[ 0 ];
 18          var ints = document.getElementById( ' int ' );
 19          // Create a request object 
20          var a =  new XMLHttpRequest();
 21          // Initialize 
22          a.open ( ' get ' , ' city.json ' , ' true ' );
 23          // send 
24          a.send();
25          // What step is the readySate status code interaction to ? 
26          // 0: The request is not initialized 
27          // 1: The server connection has been established 
28          // 2: The request has been accepted 
29          // 3: The request is being processed 
30          // 4: The request Completed and the response is ready 
31          // status Whether the interaction is successful 
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: Get response data in string form. 
36                      var b = obj.citycode ;
 37                      for ( var i =  0 ;i < b.length;i ++ ){
 38                          var nOpt = document.createElement( ' option ' );
 39                          var nOpt_t = document.createTextNode(b [i].province);
 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;     // Get the subscript value of the option selected by select 
47                          var va = sel1.options[ index].value // Get the value of the first option selected 
48                          var city = b[va].city;         // Get the city below him 
49                          sel2.options.length =  1 ;     //Clear all option values under select 
50                          for ( var i =  0 ;i < city.length;i ++ ){
 51                              var nOpt = document.createElement( ' option ' );
 52                              var nOpt_t = document.createTextNode(city [i].city name);
 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>
Native javascript AJAX three-level linkage

Guess you like
