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 # 三级联动 # PHP+Mysql+Ajax+JS实现省市区三级联动 # JS制作简单的三级联动 # javascript实现省市区三级联动下拉框菜单 # 省市区三级联动下拉框菜单javascript版 # jquery+json 通用三级联动下拉列表 # js实现一个省市区三级联动选择框代码分享 # ASP+JS三级联动下拉菜单[调用数据库数据] # 原生js三级联动的简单实现代码 # 从QQ网站中提取的纯JS省市区三级联动菜单 # JavaScript实现省市区三级联动 # 请输入 # 天津 # 重庆 # 上海 # 北京 # 崂山 # 昌平区 # 宝山区 # 朝阳区 # 济南 # 青岛 # 山东 # 多说 # option # log # script # body # select # id # type

返回目录在线咨询

上一篇：在Windows环境中，如何优化网站的加载速度？
下一篇：Blazor AuthenticationStateProvider 使用教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求