<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS dynamically adds options to select [IE and FireFox compatible]</title>
<script language="javascript" type="text/javascript">
function xlbchange(s){
switch (s){
case "1" :
("lb").=0;
var soojs_value=[0,1,2,3];
var soojs_text=["Spiritual refinement", "Text design", "Goal setting", "Concept improvement"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = ("OPTION");
=soojs_value[i];
=soojs_text[i];
(oOption);
}
break;
case "2" :
("lb").=0;
var soojs_value=[0,1,2,3,4,5,6,7];
var soojs_text=["School emblem","School emblem","School name style","School history exhibition room","Propaganda brochure","Propaganda CD","Office supplies souvenirs"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = ("OPTION");
=soojs_value[i];
=soojs_text[i];
(oOption);
}
break;
case "3":
("lb").=0;
var soojs_value=[0,1,2,3];
var soojs_text=["Campus Landscape Design","Campus Sculpture Design","Campus Relief Design","Coordinate Culture Design"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = ("OPTION");
=soojs_value[i];
=soojs_text[i];
(oOption);
}
break;
case "4":
("lb").=0;
var soojs_value=[0,1,2];
var soojs_text=["School system", "Cultural activities", "Conduct norms"];
for ( var i=0;i<soojs_value.length;i++){
var oOption = ("OPTION");
=soojs_value[i];
=soojs_text[i];
(oOption);
}
break;
default :
("lb").=0;
var oOption = ("OPTION");
=0;
="Please select the category of works";
(oOption);
}
}
</script>
</head>
<body>
<form action="" name="zpmange" method="post">
<p><select onchange="getvalue(this)"><br />
</select></p>
<p> Dynamically delete all options in select: <br />
("ddlResourceType").=0; <br />
<br />
Dynamically delete an option in select: <br />
("ddlResourceType").(indx); </p>
<p> Dynamically add the item option in select: <br />
("ddlResourceType").(new Option(text,value)); </p>
<p> The above tests were successful in both IE and FireFox, and I hope you can use them in the future. <br />
In fact, standard DOM operations are also OK, that is, appendChild, removeChild, etc. </p>
<p>Value aspect<br />
function getvalue(obj)<br />
{<br />
var m=[].value<br />
alert(m);//Get value<br />
var n=[].text<br />
alert(n);//Get text<br />
}<br />
</p>
<p>Example:</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" onchange="xlbchange()">
<option selected="selected">Please select the work system</option>
<option value="1">Conceptual system</option>
<option value="2">Visual recognition system</option>
<option value="3">Environmental view system</option>
<option value="4">Behavioral system</option>
</select>
</div></td>
<td width="61%" ><div align="center">
<select name="lb" >
<option selected="selected">Please select the category of works</option>
</select>
</div></td>
</tr>
<tr>
<td height="203" colspan="2" > </td>
</tr>
</table>
</form>
</body>
</html>