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 三級關聯的實作代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對腳本之家網站的支援！