javascript实现多选选项二级联动
时间:2020-03-27
本文章向大家介绍javascript实现多选选项二级联动,主要包括javascript实现多选选项二级联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
效果展示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>标题</title> 6 <script type="text/javascript"> 7 var provinceArr = new Array(5); //定义数组保存二级市级名称 8 provinceArr[0]=new Array("北京市"); 9 provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市"); 10 provinceArr[2]=new Array("石家庄市","唐山市","秦皇岛市","邯郸市"); 11 provinceArr[3]=new Array("西安市","宝鸡市","延安市"); 12 provinceArr[4]=new Array("菏泽市","济南市","青岛市"); 13 14 15 function provinceChange(province) { 16 var city = document.getElementById("city"); 17 if (province.value=="-1"){ //判断当一级选项选择 请选择 时,二级选项也为 请选择 18 city.innerHTML="<option value=\"-1\">-请选择-</option>"; 19 return; //加return表示如果一级选择 请选择 选项,二级选项不用遍历 20 } 21 city.options.length=0; //设置二级选项的option标签数量为0,每次一级选项改变时,二级选项内容先清空再添加 22 var cityArr=provinceArr[province.value]; 23 for(var i=0;i<cityArr.length;i++){ 24 var cityOption = document.createElement("option"); //* <option></option> 25 cityOption.innerText=cityArr[i]; 26 city.appendChild(cityOption); //* appendChild 27 } 28 } 29 </script> 30 </head> 31 <body> 32 <select onchange="provinceChange(this)"> 33 <option value="-1">-请选择-</option> 34 <option value="0">北京市</option> 35 <option value="1">河南省</option> 36 <option value="2">河北省</option> 37 <option value="3">陕西省</option> 38 <option value="4">山东省</option> 39 </select> 40 <select id="city"> 41 <option value="-1">-请选择-</option> 42 </select> 43 </body> 44 </html>
原文地址:https://www.cnblogs.com/zuzhuangmengxiang/p/12582814.html
- 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示(可自动切换背景)
- 02.LoT.UI 前后台通用框架分解系列之——灵活的菜单栏
- 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
- 07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器
- 07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器
- 洛谷P3358 最长k可重区间集问题(费用流)
- 08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器
- iOS多线程——RunLoop与GCD、AutoreleasePool你要知道的iOS多线程NSThread、GCD、NSOperation、RunLoop都在这里
- iOS多线程——你要知道的RunLoop都在这里你要知道的iOS多线程NSThread、GCD、NSOperation、RunLoop都在这里
- iOS网络——AFNetworking AFHttpSessionManager源码解析
- iOS网络——SDWebImage SDImageDownloader源码解析你要知道的NSURLSession都在这里
- iOS缓存 NSCache详解及SDWebImage缓存策略源码分析你要知道的NSCache都在这里
- freeRTOS信号量学习
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.6):基本数据类型及字符集编码(整型、浮点型、布尔型)
- 多图详解Spring框架的设计理念与设计模式
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.2-3.5):标识符、关键字、注释、变量及常量
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.1):一个简单的例子
- 详解Java解析XML的四种方法
- 《Java从入门到失业》第四章:类和对象(4.6):类路径
- 《Java从入门到失业》第四章:类和对象(4.5):包
- 《Java从入门到失业》第四章:类和对象(4.4):方法参数及传递
- 《Java从入门到失业》第四章:类和对象(4.3):一个完整的例子带你深入类和对象
- 《Java从入门到失业》第四章:类和对象(4.2):String类
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.9):数组(数组基本使用、数组的循环、数组拷贝、数组排序、多维数组)
- Establishing SSL connection without server identity verification is not recommended
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.8):流程控制(循环语句、while语句、for语句)
- 《Java从入门到失业》第三章:基础语法及基本程序结构(3.8):流程控制(选择语句、if-else语句、switch语句)
- 线上服务启动卡死,堆栈分析