js動態添加select菜單 聯動菜單
原文發布時間為：2009-11-14 —— 來源於本人的百度文章 [由搬家工具導入]
<html>
<head>
<title>http://hi.baidu.com/handboy</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body { font-size: 14px }
-->
</style>
</head>
<body bgcolor=#FFFFFF alink=#333333 vlink=#333333 link=#333333 topmargin=0 leftmargin=0>
<form>
<script language="javascript">
<!--
function LoandCity(provinceID)
{
switch (provinceID)
{
//
case "1":
//清空select
document.getElementById("city").options.length=0;
//添加SELECT 这个地方我们可以自己调用数据里面的数据
document.getElementById("city").options.add(new Option("宣武区","1"));
document.getElementById("city").options.add(new Option("海淀区","2"));
break
case "2":
document.getElementById("city").options.length=0;
document.getElementById("city").options.add(new Option("黄浦区","1"));
document.getElementById("city").options.add(new Option("闸北区","2"));
break
default:
alert("错误类型");
break
}
}
-->
</script>
<body>
<form name="form1" >
<select id="province" onChange = "LoandCity(this.value);">
<!--这个地方我们可以自己调用数据库里面的省份-->
<option value="1">北京</option>
<option value="2">上海</option>
</select> 城市 <select id="city" ></select><br>
<script type="text/javascript">LoandCity('1');</script>
</form>
</body>
</html>
可能会遇见一些问题，可以见这篇文章回发或回调参数无效 “HtmlSelect”不能有类型为“LiteralControl”的子级
=====================
1 检测是否有选中
if (objSelect.selectedIndex > - 1 ) {
// 说明选中
} else {
// 说明没有选中
}
2 删除被选中的项
objSelect.options[objSelect.selectedIndex] = null ;
3 增加项
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );
4 修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );
5 得到所选择项的文本
objSelect.options[objSelect.selectedIndex].text;
6 得到所选择项的值
objSelect.options[objSelect.selectedIndex].value;
js動態添加select菜單 聯動菜單