js实现select⼆级联动下拉菜单
本⽂实例为⼤家分享了js实现select⼆级联动下拉菜单，供⼤家参考，具体内容如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+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;js 二维数组
//得到对应省份的城市数组
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>
这段代码⽐较简单。
如果对js不⼤熟悉，可以看看下⾯关于js处理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])表⽰创建⼀个值为provinceCity[i]，⽂本为provinceCity[i]的option对象，sltCity是页⾯上的city对象，i+1指定新添选项的位置。
3、清空⼀个select对象
要将下拉框的所有选项删除有两种⽅法，
第⼀种⽅法就是遍历删除：
var l=myselect.length;
for(var i=0;i<l;i++){
myselect.options[i]=null;
}
第⼆种⽅法⽐较简单，因此⼀般都使⽤此⽅法：
myselect.length=0;
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。