js实现三级联动效果（简单易懂）

2019-11-19 17:01:32

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：vue2.0实战之使用vue-cli搭建项目（2）

下一篇：nodejs学习笔记之路由