<!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. Go 并发控制--WaitGroup的使用

    开发过程中,经常task之间的同步问题.例如,多个子task并发完成一部分任务,主task等待他们最后结束. 在Go语言,实现同步的一种方式就是WaitGroup. Example package m ...

  2. Jumpserver 介绍

    安装jumperserver Sudo yum install –y git Su root Cd  /usr/local Mkdir jumpserver 安装等依赖包 yum -y install ...

  3. Sql Server Report Service 的部署问题(Reporting Service 2014為什麼不需要IIS就可以運行)

    http://www.cnblogs.com/syfblog/p/4651621.html Sql Server Report Service 的部署问题 近期在研究SSRS部署问题,因为以前也用到过 ...

  4. elasticsearch 常用命令（一）

    索引 搜索 mapping 分词器 1.创建索引 http://192.168.65.131:9200/smartom_index?pretty 2.查看索引: http://192.168.65.1 ...

  5. 微信h5支付demo微信H5支付demo非微信浏览器支付demo微信wap支付

    服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议       ...

  6. Java第03次实验提纲(面向对象1-基本概念)

    0. 将码云的项目clone到本机 请参考使用Eclipse Egit与码云管理你的代码中的3 从码云将项目clone到你的电脑 之后就可以在Eclipse中提交本地项目新增或修改的文件.如果在Ecl ...

  7. Flask--路由备忘

    路由: 路由传参route("/index/<userid>") def index(userid),参数数据类型的指定route("user/<int ...

  8. Microsoft.NET.Framework开机报错解决方法

    win10自动更新后每次开机都报错Microsoft.NET.Framework. 如下图所示: 网上查了各种各样的方法折腾了好久. 其中看到了这样一个回答 “有两种可能 你电脑里的某个软件需要使用M ...

  9. [蓝桥杯]ALGO-87.算法训练_字串统计

    问题描述 给定一个长度为n的字符串S,还有一个数字L,统计长度大于等于L的出现次数最多的子串(不同的出现可以相交),如果有多个,输出最长的,如果仍然有多个,输出第一次出现最早的. 输入格式 第一行一个 ...

  10. 【nosql】之ehcache.xml文件属性描述

    <ehcache updateCheck="false" name="shiroCache"> <defaultCache <!--最大 ...