三级联动原生ajax,原生JS+AJAX做出三级联动效果（附代码）

这次给大家带来原生JS+AJAX做出三级联动效果(附代码)，原生JS+AJAX做出三级联动的注意事项有哪些，下面就是实战案例，一起来看一下。

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

js原生ajax

-请选择 省/直辖市/自治区-

-请选择 市-

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

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

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;

}

}

}

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：