<!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. 在free bsd上跑JMeter 的 plugin "PerfMon Server Agent"

    在free bsd上跑JMeter 的 plugin "PerfMon Server Agent" 目的: 在free bsd上跑JMeter 的 plugin "Per ...

  2. [转]Ubuntu python-config

    转自:http://manpages.ubuntu.com/manpages/precise/man1/python-config.1.html recise (1) python-config.1. ...

  3. python 中的 metaclass

    最遇到一个问题. class Meta(type): pass class M1(Meta): pass class M2(metaclass=M1): pass class Test(M2,meta ...

  4. 解决“chrome adobe flash player不是最新版本”的方法

    chrome地址栏输入chrome://components 更新flash后,重启chrome即可,可能需要搭梯子才能更新.

  5. VUEX 学习

    语法   翻译  功能介绍 module(模块)extend(扩展)extract(提取)export(输出)router(路由器)components(组件) store(储存)state (声明. ...

  6. Gerrit安装

    1.安装gerrit [sisi@pre-srv44 ~]$ su - gerrit2Password: [gerrit2@pre-srv44 ~]$ lltotal 83872-rw-r--r-- ...

  7. 【转】non-blocking REST services with Spring MVC

    堵塞Controller Controller为单例: 非线程安全: 堵塞方式: 1个request对应1个处理Thread: @RestController public class Process ...

  8. uoj#29. 【IOI2014】Holiday

    http://uoj.ac/problem/29 经过的点集一定是一个包含start的区间,为了经过这个区间内所有点,必须先到达一个区间端点,再到达另一个区间端点,剩余的步数则贪心选区间内最大价值的点 ...

  9. bzoj5006: [THUWC2017 Bipartite]随机二分图

    某人在玩一个非常神奇的游戏.这个游戏中有一个左右各 nnn 个点的二分图,图中的边会按照一定的规律随机出现. 为了描述这些规律,某人将这些边分到若干个组中.每条边或者不属于任何组 (这样的边一定不会出 ...

  10. VRRP、Track与NQA联动配置举例（Master监视上行链路）

    原文 http://www.h3c.com/cn/d_201708/1018729_30005_0.htm#_Toc488338729 1. 组网需求 Host A需要访问Internet上的Host ...