zoukankan      html  css  js  c++  java
  • 原生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>
  • 相关阅读:
    Python中的类(上)
    Django REST Framework API Guide 07
    Django REST Framework API Guide 06
    Django REST Framework API Guide 05
    Django REST Framework API Guide 04
    Django REST Framework API Guide 03
    Django REST Framework API Guide 02
    Django REST Framework API Guide 01
    Django 详解 信号Signal
    Django 详解 中间件Middleware
  • 原文地址:https://www.cnblogs.com/CcPz/p/8987663.html
Copyright © 2011-2022 走看看