<!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. py-day1-3 python基本数据类型

    数据的基本类型: 数字:

  2. The Best KPIs to Use in Your Company

    Here is a list of key performance indicators (KPIs) that should be used in contact centres, alongsid ...

  3. Excel技巧--使用温度计图让目标与实际对比更明显

    如上图,有一业绩目标与实际值对比表格,我们可使用如上图右方的温度计图表来让数字对比更明显些. 做法: 1.选择该表格,点击插入-->柱形图,簇状柱形图. 2.右键点击图表“实际值”柱,点选“设置 ...

  4. excel技巧--一键求和

    类似于上图的表格,我们要得到右侧和下侧栏的汇总结果,通常可以用sum公式加下拉方式,但是还有一种方法更快速,那就是使用 ALT + “+=”组合键就能一下子得到所有汇总结果.(+=键,就是一个键,该键 ...

  5. DynArrayToVariant DynArrayFromVariant复制动态数

    type intArr=array of Integer; procedure TfrmMainDA.Button2Click(Sender: TObject);var aa:intArr;bb:in ...

  6. oracle rename数据文件的两种方法

    oracle rename数据文件的两种方法 2012-12-11 20:44 10925人阅读 评论(0) 收藏 举报  分类: oracle(98)  版权声明:本文为博主原创文章,未经博主允许不 ...

  7. PREV-9_蓝桥杯_大臣的旅费

    问题描述 很久以前,T王国空前繁荣.为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市. 为节省经费,T国的大臣们经过思考,制定了一套优秀的修建方案,使得任何一个大城市都能从首 ...

  8. php的语句

    1.php流程语句 1.php代码执行从上到下 2.条件语句 if else 和 switch 案例: $name=56; if($name>56) echo "hello world ...

  9. HTTP 2.0 原理详细分析

    HTTP 2.0是在SPDY(An experimental protocol for a faster web, The Chromium Projects)基础上形成的下一代互联网通信协议.HTT ...

  10. Html的本质及在web中的作用

    概要 本文以一个Socket程序为例由浅及深地揭示了Html的本质问题,同时介绍了作为web开发者我们在开发网站时需要做的事情 Html的本质以及开发需要的工作 1.服务器-客户端模型 其实,对于所有 ...