三级联动原生ajax,原生javascript 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;

}

}

}

}

总结

以上所述是小编给大家介绍的原生javascript AJAX 三级联动的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！