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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
JavaScript中变量提升机制示例详解
Dec 27 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
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
使用python实现knn算法
2017/12/20 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python实现智能语音天气预报
2019/12/02 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
年终晚会主持词
2014/03/25 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
趣味运动会口号
2015/12/24 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL