js实现三级联动效果(简单易懂)


Posted in Javascript onMarch 27, 2017

话不多说,请看代码:

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
js 处理URL实用技巧
Nov 23 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
JS数组去重(4种方法)
Mar 27 #Javascript
JS实现隔行换色的表格排序
Mar 27 #Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 #Javascript
axios学习教程全攻略
Mar 26 #Javascript
js oncontextmenu事件使用详解
Mar 25 #Javascript
js 函数式编程学习笔记
Mar 25 #Javascript
CodeMirror js代码加亮使用总结
Mar 25 #Javascript
You might like
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP 遍历文件实现代码
2011/05/04 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python threading的使用方法解析
2019/08/28 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python chardet库识别编码原理解析
2020/02/18 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
导游的职业规划书范文
2013/12/27 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
企业文化标语大全
2014/06/10 职场文书
药剂专业求职信
2014/06/20 职场文书
大学生在校表现评语
2014/12/31 职场文书
民事代理词范文
2015/05/25 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技