本文详细介绍如何使用JavaScript实现Select下拉菜单的二级联动功能。重点讲解selectedIndex属性获取索引、Option构造函数创建选项以及清空下拉列表的两种方法，通过具体代码示例帮助开发者掌握下拉框动态交互的核心技术。
JavaScript实现Select二级联动下拉菜单详解
本文分享一个使用JavaScript实现Select下拉菜单二级联动的具体实例，供读者参考学习。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="JavaScript" type="text/javascript">
//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
var city=[
["北京","天津","上海","重庆"],
["南京","苏州","南通","常州"],
["福州","福安","龙岩","南平"],
["广州","潮阳","潮州","澄海"],
["兰州","白银","定西","敦煌"]
];
function getCity(){
//获得省份下拉框的对象
var sltProvince=document.form1.province;
//获得城市下拉框的对象
var sltCity=document.form1.city;
//得到对应省份的城市数组
var provinceCity=city[sltProvince.selectedIndex - 1];
//清空城市下拉框，仅留提示选项
sltCity.length=1;
//将城市数组中的值填充到城市下拉框中
for(var i=0;i<provinceCity.length;i++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
</script>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="" name="form1">
<SELECT NAME="province" onChange="getCity()">
<OPTION VALUE="0">请选择所在省份 </OPTION>
<OPTION VALUE="直辖市">直辖市 </OPTION>
<OPTION VALUE="江苏省">江苏省 </OPTION>
<OPTION VALUE="福建省">福建省 </OPTION>
<OPTION VALUE="广东省">广东省 </OPTION>
<OPTION VALUE="甘肃省">甘肃省 </OPTION>
</SELECT>
<SELECT NAME="city">
<OPTION VALUE="0">请选择所在城市 </OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
该示例代码结构简洁，易于理解。
若对JavaScript处理Select对象的操作不熟悉，可参考下文关于Select对象处理的详细说明。
获取当前选中项索引
1、利用selectedIndex属性获取当前选中项的索引
下拉列表的选项构成一个线性数组，每个选项均拥有对应的索引值。selectedIndex属性用于返回当前被选中选项的索引号。结合options属性，可以获取对应的option对象，进而执行后续操作。需要注意的是，当下拉框支持多选时，selectedIndex属性仅返回第一个被选中项的索引。
由于selectedIndex是只读属性，若需通过索引将特定选项设为选中状态，应设置对应option对象的selected属性为true。
动态添加下拉选项
2、向Select对象添加新选项
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);new Option(provinceCity[i], provinceCity[i])用于创建一个Option对象，其值和显示文本均为provinceCity[i]。sltCity代表页面中的city下拉框对象，i+1指定了新选项插入的位置。
清空下拉列表选项
3、清空Select对象的所有选项
删除下拉框所有选项主要有两种方法： 第一种方法是遍历删除：
var l=myselect.length;
for(var i=0;i<l;i++){
myselect.options[i]=null;
}第二种方法更为简便，因此通常推荐使用此方式：
myselect.length=0;以上为本文全部内容，希望能为您的学习提供有益帮助，欢迎继续支持本站。