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

2020-11-27 来源：筏尚旅游网

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 AJAX 三级联动的实现代码