js如何實現(xiàn)三級聯(lián)動效果

發(fā)布時間：2021-06-21 11:42:13 來源：億速云閱讀：144 作者：小新欄目：web開發(fā)

小編給大家分享一下js如何實現(xiàn)三級聯(lián)動效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

示例代碼如下：

<!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>請輸入?yún)^(qū)</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@濟(jì)南','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>請輸入?yún)^(qū)</option>';
    three.disabled='disabled';
  }
  var arr3 = {
    '101':['朝陽區(qū)','昌平區(qū)'],
    '201':['寶山區(qū)','浦東區(qū)'],
    '301':['不知道'],
    '401':['真的不知道'],
    '501':['市中區(qū)','歷下區(qū)','槐蔭區(qū)'],
    '502':['市南區(qū)','市北區(qū)','嶗山區(qū)']  };
  otwo.onchange = function(){
    var val=this.value;
    console.log( this.value);
    var str2='<option>請輸入?yún)^(qū)</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如何實現(xiàn)三級聯(lián)動效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

js如何實現(xiàn)三級聯(lián)動效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽