<Select id = "ddlResourceType" onchange = "getvalue (this)">
</Select>
Dynamically delete all options in the select statement:
Document. getElementById ("ddlResourceType"). options. length = 0;
Dynamically delete an option in the select statement:
Document. getElementById ("ddlResourceType"). options. remove (indx );
Dynamically Add the option in the select statement:
Document. getElementById ("ddlResourceType"). options. add (new Option (text, value ));
Both IE and FireFox can be tested successfully. I hope you can use it later.
You can also use standard DOM operations, such as document. createElement, appendChild, and removeChild.
Value
Function getvalue (obj)
{
Var m = obj. options [obj. selectedIndex]. value
Alert (m); // obtain the value
Var n = obj. options [obj. selectedIndex]. text
Alert (n); // get text
}
========================================================== ==============================================
1. Check whether selected
If (objSelect. selectedIndex>-1 ){
// Indicates the selected
} Else {
// The description is not selected.
}
2. Delete selected items
ObjSelect. options [objSelect. selectedIndex] = null;
3. Add items
ObjSelect. options [objSelect. length] = new Option ("hello", "hello ");
4. Modify the selected items
ObjSelect. options [objSelect. selectedIndex] = new Option ("hello", "hello ");
5. Obtain the text of the selected item.
ObjSelect. options [objSelect. selectedIndex]. text;
6. Obtain the value of the selected item.
ObjSelect. options [objSelect. selectedIndex]. value;
========================================================== ====================================
<% @ 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> dynamically add options to select using JavaScript [IE and FireFox compatible] </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 = ["Spirit extraction", "Style Design", "goal setting", "concept improvement"];
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 = ["school logo", "school motto", "school song", "school name font", "school history exhibition room", "brochure", "promotional disc ", "office supplies souvenir"];
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 = ["Campus Landscape Design", "campus sculpture design", "campus embossed design", "corridor culture design"];
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 = ["School System", "cultural activities", "behavioral norms"];
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 = "select file category ";
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> dynamically delete all options in the select statement: <br/>
Document. getElementById ("ddlResourceType"). options. length = 0; <br/>
<Br/>
Dynamically delete an option in the select statement: <br/>
Document. getElementById ("ddlResourceType"). options. remove (indx); </p>
<P> dynamically Add the option in the select statement: <br/>
Document. getElementById ("ddlResourceType"). options. add (new Option (text, value); </p>
<P> both IE and FireFox can be tested successfully. I hope you can use it later. <Br/>
You can also use standard DOM operations, such as document. createElement, appendChild, and removeChild. </P>
<P> value <br/>
Function getvalue (obj) <br/>
{<Br/>
Var m = obj. options [obj. selectedIndex]. value <br/>
Alert (m); // obtain value <br/>
Var n = obj. options [obj. selectedIndex]. text <br/>
Alert (n); // obtain 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" id = "xt" onchange = "xlbchange (this. value)">
<Option selected = "selected"> select the file system </option>
<Option value = "1"> concept view system </option>
<Option value = "2"> visual recognition system </option>
<Option value = "3"> environment view system </option>
<Option value = "4"> behavior-based system </option>
</Select>
</Div> </td>
& Lt; td width = "61%" & gt; <div align = "center" & gt;
<Select name = "lb" id = "lb">
<Option selected = "selected"> select a Category </option>
</Select>
</Div> </td>
</Tr>
<Tr>
<Td height = "203" colspan = "2"> </td>
</Tr>
</Table>
</Form>
</Body>
</Html>