二级联动菜单

select 对象

一个<select>标记，对应一个select对象；

select对象的属性

1,options[] :设置或返回下拉列表中<option>标记构成的数组；
2,selectedIndex :设置或选中指定<option>的索引号；
3,length :指定下拉列表中<option>标记的个数；
4,name :元素名称；

option对象

一个<option>标记，对应一个option对象；

option 对象属性

1,text :指<option>和</option>之间的文本；
2,value :指是指<option>标记的属性；

实例：省份列表与城市列表的联动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS二级联动菜单</title>
</head>
<script type="text/javascript">var arr_province = ["请选择省份/城市", "北京市", "上海市", "天津市", "河南省", "山东省", "河北省"];var arr_city = [["请选择城市/地区"],["中关村", "海淀区", "朝阳区", "昌平区", "丰台区", "大兴区"],["宝坻区", "浦东新区", "长宁区", "徐汇区", "虹口区", "宝山区"],["和平区", "河东区", "河西区", "塘沽区", "大港区", "北辰区"],["郑州市", "洛阳市", "商丘市", "开封市", "安阳市", "濮阳市"],["济南市", "青岛市", "烟台市", "德州市"],["石家庄", "菏泽市", "唐山市"],];function init() {var province = document.form1.province;//获取省份列表对象province.style.width = 150 + "px";//设置省份列表宽度var city = document.form1.city;//获取城市列表对象city.style.width = 150 + "px";//设置城市列表的宽度//给province赋值长度，才能在其里面写入内容province.length = arr_province.length;//省份列表的长度等于省份数组的长度//循环输入省份数组中的值到省份列表中的option标记中for (var i = 0; i < arr_province.length; i++) {province.options[i].text = arr_province[i];//省份列表中的每个option的文本值等于省份数组中对应的索引值province.options[i].value = arr_province[i];//省份列表中的每个option的value属性的值等于省份数组中对应的索引值}//设置默认被选中的选项var index = 0;province.selectedIndex = index;//给city赋值高度，才能在其里面写入内容city.length = arr_city[index].length;//city的长度对应着二维数组中的相应的数组元素的长度；//循环输入城市二维数组中对应的一维数组的值到城市列表中的option标记中for (var j = 0; j < arr_city[index].length; j++) {city.options[j].text = arr_city[index][j];//城市列表中的每个option的文本值等于城市数组中对应的索引值city.options[j].value = arr_city[index][j];//城市列表中的每个option的value属性的值等于城市数组对应的一维数组中对应的索引值}}function select_change(num) {//选中的项发生改变时，触发的函数var city = document.form1.city;//获取城市列表对象city.length = 0;//设置城市列表的默认的初始长度city.length = arr_city[num].length;//改变城市列表的长度为城市二维数组中被选中的省份对应的一维数组的长度for (var i = 0; i < arr_city[num].length; i++) {//更改城市列表中的option数组city.options[i].text = arr_city[num][i];//城市列表中的每个option的文本值等于城市数组中对应的索引值city.options[i].value = arr_city[num][i];//城市列表中的每个option的value属性的值等于城市数组对应的一维数组中对应的索引值}}
</script><body οnlοad="init()"><!-- 加载完成后调用初始化form的函数 --><form name="form1">所在地区：<select name="province" οnchange="select_change(this.selectedIndex)"></select>城市：<select name="city"></select></form>
</body></html>

显示效果如下：

@沉木

前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动相关推荐

原生js实现二级伸缩菜单
看似简单的小功能,坑却不少...主要为了练习一下自己的js实践能力,真是不写不知道,这么小小的一个东西我遇到的坑实在是太多了,放上来仅供参考学习..优化什么的都不好.... 效果如图所示: 代码如下: ...
JS省市二级联动菜单,sky整理收集。
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
php js 二级联动_PHP+ajax实现二级联动菜单功能示例
本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于 ...
二级联动菜单，简单实现
/*** jQuery Linkage Menu** Copyright 2014, sunyingyuan* QQ: 1586383022* Email: yingyuansun@163.com** ...
asp+ajax菜单,AJAX_基于asp+ajax和数据库驱动的二级联动菜单，index.asp 页面代码复制代码代 - phpStudy...
基于asp+ajax和数据库驱动的二级联动菜单 index.asp 页面代码复制代码代码如下: set cmd = conn.execute("select bigclassid,big ...
php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
首先看文件结构: /inc 包含function.php文件和数据操作类 /index.php html代码和州的收据获取代码 /ajax_city.php 城市数据的获取代码 /ajax.js ht ...
ajax二级联动源代码,Ajax二级联动菜单实现原理及代码
index.jsp: 二级菜单联动演示 var req; window.οnlοad=function() {//页面加载时的函数 } function Change_Select(){//当第一个下 ...
JS实现的五级联动菜单效果完整实例
https://www.jb51.net/article/106525.htm 本文实例讲述了JS实现的五级联动菜单效果.分享给大家供大家参考,具体如下: js实现多级联动的方法很多,这里给出一种5级 ...
java ajax 联动菜单_二级联动菜单代码(AJAX JAVA).
二级联动菜单代码(AJAX+JAVA)珍藏 [java] pageEncoding="UTF-8"%> 二级菜单联动演示 var req; window.οnlοad=fun ...

前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动