溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js如何實現三級聯動效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select id="one">
<option>請輸入省份</option>
</select>
<select id="two">
<option>請輸入市</option>
</select>
<select id="three">
<option>請輸入區</option>
</select>
<script type="text/javascript">
var oone=document.getElementById("one");
var otwo=document.getElementById("two");
var three=document.getElementById("three");
var str='';
otwo.disabled=true;
three.disabled=true;
var arr1=[{"id":"1","value":"北京"},{"id":"2","value":"上海"},{"id":"3","value":"重慶"},{"id":"4","value":"天津"},{"id":"5","value":"山東"}];
for(var i=0;i<arr1.length;i++){
str+="<option value="+arr1[i].id+">"+arr1[i].value+"</option>"
}
oone.innerHTML=str;
var arr2 = {
'1':['101@北京'],
'2':['201@上海'],
'3':['301@重慶'],
'4':['401@天津'],
'5':['501@濟南','502@青島'] };
oone.onchange=function(){
var val=this.value;
var arrA = arr2[val];
var str1='<option>請輸入市</option>';
for(var j=0;j<arrA.length;j++){
var aaa=arrA[j].split('@');
str1+="<option value="+aaa[0]+">"+aaa[1]+"</option>"
}
otwo.innerHTML=str1;
otwo.disabled=false;
three.innerHTML='<option>請輸入區</option>';
three.disabled='disabled';
}
var arr3 = {
'101':['朝陽區','昌平區'],
'201':['寶山區','浦東區'],
'301':['不知道'],
'401':['真的不知道'],
'501':['市中區','歷下區','槐蔭區'],
'502':['市南區','市北區','嶗山區'] };
otwo.onchange = function(){
var val=this.value;
console.log( this.value);
var str2='<option>請輸入區</option>';
console.log(val)
for(var l=0;l<arr3[val].length;l++){
str2+="<option >"+arr3[val][l]+"</option>"
}
three.innerHTML=str2;
three.disabled=false;
}
</script>
</body>
</html>以上是“js如何實現三級聯動效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
