<!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('sel1')[0];

         var sel2 = document.getElementsByName('sel2')[0];

         var ints = document.getElementById('int');

         // 创建请求对象

         var a = new XMLHttpRequest();

         // 初始化

         a.open('get','city.json','true');

         // 发送

         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('option');

                         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('option');

                             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]['市'][sel2v]['编码'];

                         ints.value = intsi;

                     }

                 }

             }

         }

     </script>

 </body>

 </html>

原生javascript AJAX 三级联动的更多相关文章

  1. 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区

    使用AJAX + 三级联动  实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...

  2. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  3. AJAX 三级联动

    新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...

  4. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  5. 2019.03.25 Ajax三级联动

    所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果 如选择市之后,会给出相应的区,然后到相应的县这就是联动 配置视图 ​from django.core import serialize ...

  6. 0509 关于Ajax + 三级联动示例

    关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...

  7. [Ajax三级联动 无刷新]

    三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...

  8. 2、.net NVelocity中原生javascript ajax封装使用

    在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var x ...

  9. 原生JS实现三级联动

    代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

随机推荐

  1. [转]关于ImportError: xxxx.so: undefined symbol: PyFPE_jbuf的解决方案

    转自: http://blog.csdn.net/zixiximm/article/details/50505921 最近在学着用caffe,总是遇到各种各样奇怪的问题.有时候搜遍整个google也找 ...

  2. [转]Aroon Indicator

    Aroon Indicator Trend Oscillator Description The Aroon indicator, developed by Tushar Chande, indica ...

  3. org.apache.ibatis.binding.BindingException: Invalid bound statement

    idea中出现了这个问题 我的解决方案是: 把mapper映射文件放到资源目录下 然后就行了. 当然,这个具体原因就是:mapper.xml和接口对不上引起的,具体问题还要具体解决 协助博客:http ...

  4. ANTS Performance Profiler和ANTS Memory Profiler

    使用ANTS Performance Profiler&ANTS Memory Profiler工具分析IIS进程内存和CPU占用过高问题   一.前言 最近一段时间,网站经常出现两个问题: ...

  5. 正则判断 文件名是否为zip格式

    var type = filename.match(/^(.*)(\.)(.{1,8})$/)[3].toUpperCase();

  6. git .gitignore文件

    .gitignore ! /*   忽略所有的文件 !/pages/  添加根目录下的所有文件被跟踪

  7. PAT 乙级 1070 结绳(25) C++版

    1070. 结绳(25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定一段一段的绳子,你需要把它们串成一条 ...

  8. consul-template + nginx部署高可用负载均衡

    一.Consul-Template简介 Consul-Template是基于Consul的自动替换配置文件的应用.在Consul-Template没出现之前,大家构建服务发现系统大多采用的是Zooke ...

  9. 廖雪峰Java3异常处理-1错误处理-4自定义异常

    JDK已有的异常: RuntimeException * NullPointerException * IndexOutOfBoundsException * SecurityException * ...

  10. hierarchical_mutex函数问题（C++ Concurrent in Action）

    C++ Concurrent in Action(英文版)书上(No.52-No.53)写的hierarchical_mutex函数,只适合结合std::lock_guard使用,直接使用如果不考虑顺 ...