<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS對select動態添加options操作[IE和FireFox兼容]</title>
<script language="javascript" type="text/javascript">
function xlbchange(s){
switch (s){
case "1" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["精神提煉","作風設計","目標設置","理念提升"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "2" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3,4,5,6,7];
var soojs_text=["?；?,"校訓","校歌","校名字體","校史展室","宣傳畫冊","宣傳光盤","辦公用品紀念品"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "3":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["校園景觀設計","校園雕塑設計","校園浮雕設計","走廊文化設計"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "4":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2];
var soojs_text=["學校制度","文化活動","行為規范"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
default :
document.getElementById("lb").options.length=0;
var oOption = document.createElement("OPTION");
oOption.value=0;
oOption.text="請選擇作品類別";
zpmange.lb.options.add(oOption);
}
}
</script>
</head>
<body>
<form action="zpmange.asp" name="zpmange" method="post">
<p><select id="ddlResourceType" onchange="getvalue(this)"><br />
</select></p>
<p> 動態刪除select中的所有options： <br />
document.getElementById("ddlResourceType").options.length=0; <br />
<br />
動態刪除select中的某一項option： <br />
document.getElementById("ddlResourceType").options.remove(indx); </p>
<p> 動態添加select中的項option: <br />
document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>
<p> 上面在IE和FireFox都能測試成功，希望以后你可以用上。 <br />
其實用標準的DOM操作也可以，就是document.createElement，appendChild，removeChild之類的。 </p>
<p>取值方面<br />
function getvalue(obj)<br />
{<br />
var m=obj.options[obj.selectedIndex].value<br />
alert(m);//獲取value<br />
var n=obj.options[obj.selectedIndex].text<br />
alert(n);//獲取文本<br />
}<br />
</p>
<p>例子：</p>
<table width="80%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-style:double">
<tr>
<td width="50%" height="41" ><div align="center">
<select name="xt" id="xt" onchange="xlbchange(this.value)">
<option selected="selected">請選擇作品系統</option>
<option value="1">理念視別系統</option>
<option value="2">視覺識別系統</option>
<option value="3">環境視別系統</option>
<option value="4">行為視別系統</option>
</select>
</div></td>
<td width="61%" ><div align="center">
<select name="lb" id="lb">
<option selected="selected">請選擇作品類別</option>
</select>
</div></td>
</tr>
<tr>
<td height="203" colspan="2" > </td>
</tr>
</table>
</form>
</body>
</html>
