原生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 三级联动的实现代码的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
7652
15
1393
52
91
11
73
19
37
110
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
解决jQuery AJAX请求遇到403错误的方法
Feb 20, 2024 am 10:07 AM
标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资
解决jQuery AJAX请求403错误的方法
Feb 19, 2024 pm 05:55 PM
jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误
PHP 与 Ajax：构建一个自动完成建议引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。
如何解决jQuery AJAX报错403的问题？
Feb 23, 2024 pm 04:27 PM
如何解决jQueryAJAX报错403的问题？在开发网页应用程序时，经常会使用jQuery来发送异步请求。然而，有时候在使用jQueryAJAX时可能会遇到错误代码403，表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的，但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题，并提供具体的代码示例。一、使
如何使用Ajax从PHP方法中获取变量？
Mar 09, 2024 pm 05:36 PM
使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：
js和vue的关系
Mar 11, 2024 pm 05:21 PM
js和vue的关系：1、JS作为Web开发基石；2、Vue.js作为前端框架的崛起；3、JS与Vue的互补关系；4、JS与Vue的实践应用。
PHP 与 Ajax：创建动态加载内容的解决方案
Jun 06, 2024 pm 01:12 PM
Ajax（异步JavaScript和XML）允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax，您可以动态加载产品列表：HTML创建一个带有容器元素的页面，Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求，从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据，并将其编码为JSON格式。JavaScript解析JSON数据，并将其显示在页面容器中。点击按钮触发Ajax请求，加载产品列表。
