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的.animate()函数在IE6下的问题
Dec 03 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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版)
2012/08/21 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
javascript英文日期(有时间)选择器
2007/05/02 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
深入学习python的yield和generator
2016/03/10 Python
利用python批量检查网站的可用性
2016/09/09 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
python如何保存文本文件
2020/06/07 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
售后服务承诺书
2014/03/26 职场文书
目标责任书范文
2014/04/14 职场文书
就业意向书
2014/07/29 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
开国大典观后感
2015/06/04 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers