二级联动 （两个下拉框的二级联动，和单选按钮与下拉框的二级联动）
1，两个下拉框的二级联动
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JS实现二级联动菜单</title></head><body><form name="form1" method="post" action="">省份：<select name="province" id="province" οnchange="changeSelect(this.selectedIndex)"></select><br/>地区：<select name="city" id="city"></select></form></body></html><script type="text/javascript">var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省"];var arr_city = [["请选择城市/地区"],["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区']];//网页加载完成，初始化菜单window.onload = init;//传入函数地址function init(){//首先获取对象var province = document.form1.province;var city = document.form1.city;//指定省份中<option>标记的个数province.length = arr_province.length;//循环将数组中的数据写入<option>标记中for(var i=0;i<arr_province.length;i++){province.options[i].text = arr_province[i];province.options[i].value = arr_province[i];}//修改省份列表的默认选择项var index = 0;province.selectedIndex = index;//指定城市中<option>标记的个数city.length = arr_city[index].length;//循环将数组中的数据写入<option>标记中for (var j = 0; j<arr_city[index].length;j++) {city.options[j].text = arr_city[index][j];city.options[j].value = arr_city[index][j];}}function changeSelect(index){//选择对象var city = document.form1.city;//修改省份列表的选择项province.selectedIndex = index;//指定城市中<option>标记的个数city.length = arr_city[index].length;//循环将数组中的数据写入<option>标记中for (var j = 0; j<arr_city[index].length;j++) {city.options[j].text = arr_city[index][j];city.options[j].value = arr_city[index][j];}}</script>2、单选框与下拉框的二级联动
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JS实现二级联动菜单</title></head><body><form name="form1" method="post" action="">选择一：<input type="radio" name="sel" value="日" id = "sel1"; οnchange="changeSelect(0)">日</input><input type="radio" name="sel" value="每周" οnchange="changeSelect(1)"/>每周</input><input type="radio" name="sel" value="每月" οnchange="changeSelect(2)"/>月</input><br/>选择二：<select name="city" id="city"></select></form></body></html><script type="text/javascript">var arr_time = [["1天","2天","3天","宣武区","昌平区","大兴区","丰台区","海淀区"],['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区']];//网页加载完成，初始化菜单window.onload = init;//传入函数地址function init(){console.log(1111);document.getElementById("sel1").checked=true;changeSelect(0);}function changeSelect(index){ //console.log(index)//选择对象var city = document.form1.city;//修改省份列表的选择项//指定城市中<option>标记的个数city.length = arr_time[index].length;//循环将数组中的数据写入<option>标记中for (var j = 0; j<arr_time[index].length;j++) {city.options[j].text = arr_time[index][j];city.options[j].value = arr_time[index][j];}}</script>二级联动 （两个下拉框的二级联动，和单选按钮与下拉框的二级联动）相关推荐
- 安卓学习笔记19：常用控件 - 单选按钮和复选框
文章目录 零.学习目标 一.单选按钮组 1.继承关系图 2.常用属性 3.事件监听器 4.注意事项 5.重要方法 二.单选按钮 1.继承关系图 2.常用方法 3.事件监听器 4.注意事项 三.复选框 ...
- 两个下拉框相关联ajax,触发第二个下拉框以显示基于从第一个下拉框中选择的值的值ajax...
我有两个引导程序下拉框.当我们点击另一个下拉菜单时,其中一个会根据用户选择的国家显示来自数据库的所有国家名称,另一个下拉菜单应该选择状态. 当我点击一个下拉菜单时,我做了一个ajax请求来显示国家名称 ...
- swing下拉框从mysql_Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡: 街道: 查询 譬如说,你选择了省:江苏省,那么在市区中只会显示 ...
- java下拉框查询_Java Swing应用程序 JComboBox下拉框联动查询
在web项目中,通过下拉框.JQuery和ajax可以实现下拉框联动查询. 譬如说,当你查询某个地方时,页面上有:省份: 市区: 县乡: 街道: 查询 譬如说,你选择了省:江苏省,那么在市区中只会显示 ...
- 开发一个出生年份的下拉选择框供用户选择_你的下拉式菜单设计对了吗？
追波范儿(dribbbledesign)------------------------------------------- 下拉菜单主要有两种类型:1. 用于导航的下拉菜单:2. 用于表单的下拉菜 ...
- bootstrap下拉框分页_【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...
- 下拉框优化威zx78_下拉框优化应到千捷网络下拉系统
下拉词,是百度从网友的搜索词中筛选出搜索量较大的词条,整理分类,从而建立了百度联想词的词库,当用户输入搜索词就会被推荐. 所以下拉词词库是被搜索引擎收录整理,只要使用搜索引擎,无论在何处搜索引擎都会根 ...
- element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
- html下拉框代码默认选中状态,@Html.DropDownListFor 下拉框绑定（选择默认值）
首先先构建绑定下拉框的数据源 private void GetSalesList() { var userList = _rmaExpressAppService.GetUserList(); Tem ...
- css div 下拉框内容自适应,div+css模拟select下拉框
无标题文档 .mod_select ul{margin:0;padding:0;} .mod_select ul:after{ display: block; clear: both; visibil ...
最新文章
- 3. Nest Provider
- Uart接口的详细解释
- 使用lambdaquery() 报空指针异常_Java 14 来势汹汹，这回让空指针无处遁形！！
- bash下特殊字符的含义
- 问题：如何将多个文件里内容都提取出来
- 【kafka】kafka 启动 Version `123123` is not a valid version
- 测试人员提高业务掌握度的方案
- 11月3日云栖精选夜读：《maven实战》读书笔记2——maven安装（windows和eclipse插件）...
- OPC UA 统一架构学习4
- Python学习笔记(未完)
- （鬼刀）记一次异步加载Python爬虫分析
- C语言程序设计苏小红课后习题答案7.14.5
- 电大计算机专业毕业自我鉴定,广播电视大学毕业自我鉴定3篇
- valist：解决变参问题
- Studio 3T重置日期，达到重复试用的效果
- 在表格中展示订单的倒计时定时器，用一个定时器显示多个倒计时
- 微信小程序—map地图实现标记多个位置
- 今年某宝网双11“喵糖游戏”又翻车了？遭大量网友举报
- 2021年全球及中国质谱仪行业现状以及我国进出口现状分析，我国高端产品主要从美国、德国、新加坡进口「图」
- NLP自然语言处理—文本分类入门