原生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 函数调用规则
Sep 14 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
webpack优化的深入理解
Dec 10 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
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验证session无效的解决方法
2014/11/04 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python Pygame的具体使用讲解
2017/11/03 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
使用python3构建文件传输的方法
2019/02/13 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Python之字典添加元素的几种方法
2020/09/30 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
初中作文评语大全
2014/04/23 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python