首页 > 文章 > web前端 > 原生javascript AJAX 三级联动的实现代码

原生javascript AJAX 三级联动的实现代码

不言原创: 2018-05-04 15:05:171273浏览

这篇文章主要介绍了原生javascript AJAX 三级联动的实现代码，非常不错代码简单易懂，具有一定的参考借鉴价值,需要的朋友可以参考下

js 三级联动的实现代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js原生ajax</title>
</head>
<body>
  <select name="sel1">
    <option value="" >-请选择 省/直辖市/自治区-</option>
  </select>
  <select name="sel2">
    <option value="" >-请选择 市-</option>
  </select>
  <input type="text" value="" id="int"/>
  <script>
    var sel1 = document.getElementsByName(&#39;sel1&#39;)[0];
    var sel2 = document.getElementsByName(&#39;sel2&#39;)[0];
    var ints = document.getElementById(&#39;int&#39;);
    // 创建请求对象
    var a = new XMLHttpRequest();
    // 初始化
    a.open(&#39;get&#39;,&#39;city.json&#39;,&#39;true&#39;);
    // 发送
    a.send();
    //readySate 状态码 交互进行到了哪一步
    //0：请求未初始化
    //1：服务器链接已建立
    //2：请求已经接受
    //3：请求处理中
    //4：请求已经完成，且响应已就绪
    //status 交互是否成功
    a.onreadystatechange = function(){
      if(a.status ==200||a.status == 304){
        if(a.readyState == 4){
          var obj = JSON.parse(a.response);//responseText:获得字符串形式的响应数据。
          var b = obj.城市代码;
          for(var i = 0;i<b.length;i++){
            var nOpt = document.createElement(&#39;option&#39;);
            var nOpt_t =document.createTextNode(b[i].省);
            nOpt.appendChild(nOpt_t);
            sel1.appendChild(nOpt);
            nOpt.value = i;
            console.log(ints.value)
          }
          sel1.onchange = function (){
            var index = sel1.selectedIndex;  //获取select选择的option的下标值
            var va = sel1.options[index].value//获取select第几个option的value值
            var city = b[va].市;    //获取他下边的市
            sel2.options.length = 1;  //清空所有的select下的option的值
            for(var i = 0;i<city.length;i++){
              var nOpt = document.createElement(&#39;option&#39;);
              var nOpt_t =document.createTextNode(city[i].市名);
              nOpt.appendChild(nOpt_t);
              sel2.appendChild(nOpt);
              nOpt.value = i;
              ints.value = "";
            }
          }
          sel2.onchange = function (){
            var sel1v = sel1.value;
            var sel2v = sel2.value;
            var intsi = b[sel1v][&#39;市&#39;][sel2v][&#39;编码&#39;];
            ints.value = intsi;
          }
        }
      }
    }
  </script>
</body>
</html>

原生javascript AJAX 三级联动的实现代码

相关文章