原生javascript AJAX 三级联动的实现代码


Posted in Javascript onMay 04, 2018

js 三级联动的实现代码如下所示:

<!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 三级联动的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 终止函数执行操作
Feb 14 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 #Javascript
vue裁切预览组件功能的实现步骤
May 04 #Javascript
详解vue组件基础
May 04 #Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 #Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
Vue.js 踩坑记之双向绑定
May 03 #Javascript
Vue利用canvas实现移动端手写板的方法
May 03 #Javascript
You might like
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
省三好学生申请材料
2014/01/22 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
仰望星空观后感
2015/06/10 职场文书
小时代观后感
2015/06/10 职场文书
歌咏比赛主持词
2015/06/29 职场文书
老人节主持词
2015/07/04 职场文书
办公室日常管理制度
2015/08/04 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
创业计划书之电动车企业
2019/10/11 职场文书