原生javascript AJAX 三级联动的实现代码
时间:2019-04-14
本文章向大家介绍原生javascript AJAX 三级联动的实现代码,主要包括原生javascript AJAX 三级联动的实现代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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 三级联动的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Spring Boot实现热部署
- Java中的宏变量,宏替换详解。
- 类、变量、块、构造器、继承初始化顺序,终极解答。
- Spring Boot Debug调试
- Maven精选系列--classifier元素妙用
- PostgreSQL里面的一些命令小结
- Java中创建String的两道面试题及详解
- PostgreSQL主备环境搭建
- Tomcat集群session复制与Oracle的坑。。
- 用Keras+TensorFlow,实现ImageNet数据集日常对象的识别
- JavaWeb项目架构之Elasticsearch日志处理系统
- 分布式服务防雪崩熔断器,Hystrix理论+实战。
- JavaWeb项目架构之Kafka分布式日志队列
- 如何让Git记住用户名和密码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何在js中创建对象
- 如何理解JavaScript中的this
- 学习Matplotlib看这一份笔记就够了!
- 6个提升效率的pandas小技巧
- 手把手教你用Python+Pyecharts让微博热搜榜动起来
- JS继承
- call,apply,bind 的完全实现和理 解
- js构造函数的理解
- 实战 | PyQt5制作雪球网股票数据爬虫工具
- 别再问我Python怎么操作Word了!
- Vaex :突破pandas,快速分析100GB大数据集
- 【适合收藏】为了多点时间陪女朋友,我向BAT大佬跪求了这15条JS技巧
- Flask框架教程汇总(1)---视图/重定向/传参
- OkHttp请求耗时统计
- Ubuntu 18.04 通过 Docker 快速部署 Smokeping 2.6.11 教程