<!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. yum 和 rpm安装mysql彻底删除（转）

    1.yum方式安装的MySQL $ yum remove mysql mysql-server mysql-libs compat-mysql51 $ rm -rf /var/lib/mysq $ r ...

  2. @RequestMapping、@Responsebody、@RequestBody和@PathVariable详解（转）

    一.预备知识:@RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. @Requ ...

  3. 多wan示意图

    此时计算机的网关可以任意选择其中的一台路由器的ip地址.

  4. ML平台_微博深度学习平台架构和实践

    ( 转载至: http://www.36dsj.com/archives/98977)  随着人工神经网络算法的成熟.GPU计算能力的提升,深度学习在众多领域都取得了重大突破.本文介绍了微博引入深度学 ...

  5. VGA原理

    VGA原理 1.VGA时序 2.不同的显示标准,有不同的水平段和垂直段 3.像素时钟和帧频的关系 联系目前调试的1080i 50Hz: 像素时钟为148.5MHz, 水平段周期 = 2640 X (1 ...

  6. jQuery模态框实现 后台添加删除修改Ip端口

    主要用到,$('#i1').each(),标签里绑定函数可传参数this <!DOCTYPE html> <html lang="en"> <head ...

  7. sql中的STRFTIME

    STRFTIME返回的是一个字符串 STRFTIME('%w',myTime) in ('1','2','4','5') 可以正确执行,而 STRFTIME('%w',myTime) in (1,2, ...

  8. appium 启动了2个端口，但是只有一台机器在跑的 问题解决 (还没试，记录在此)

    appium启动了2个,端口分别设置为了4723 4725, 在测试类中也分别指定了设备和端口,用device来指定.然而每次都是运行一个设备. 后来添加了udid这个来指定才发现可以.deviceN ...

  9. 【原创】Docker实战 Dockerfile最佳实践&&容器之间通信

    官方最佳实践文档 https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#from Docker实战(三十) ...

  10. 【转】十年你能做的能得到的有多少？一个工科IT男的工作回忆

    https://blog.csdn.net/b5w2p0/article/details/8798989