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 相关文章推荐
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 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
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
如何运行Python程序的方法
2013/04/21 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python实现句子翻译功能
2017/11/14 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python实现文法左递归的消除方法
2020/05/22 Python
Python celery原理及运行流程解析
2020/06/13 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
应届生新闻编辑求职信
2013/11/19 职场文书
电台实习生求职信
2014/02/25 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
个性婚礼策划方案
2014/05/17 职场文书
公司员工安全协议书
2014/11/21 职场文书
同乡会致辞
2015/07/30 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
Python中的socket网络模块介绍
2022/07/23 Python