1. dynamically create select
Function createSelect (){
Var mySelect =
Document. createElement ("select ");
MySelect. id =
"MySelect ";
Document. body. appendChild (mySelect );
}
2. Add option
Function addOption (){
// Search for objects by id,
Var
Obj = document. getElementById ('myselect ');
// Add an option
Obj. add (new Option ("text", "value "));
// This is only valid in IE
Obj. options. add (new Option ("text", "value "));
// Compatible with IE and firefox
}
3. Delete All option options
Function removeAll (){
Var
Obj = document. getElementById ('myselect ');
Obj. options. length = 0;
}
4. delete an option
Function removeOne (){
Var
Obj = document. getElementById ('myselect ');
// Index. The sequence number of the option to be deleted. The sequence number of the selected option is used here.
Var
Index = obj. selectedIndex;
Obj. options. remove (index );
}
5. Obtain the option value.
Var obj = document. getElementById ('myselect ');
Var index = obj. selectedIndex; // the serial number of the selected option.
Var val = obj. options [index]. value;
6. Obtain the option text
Var obj = document. getElementById ('myselect ');
Var index = obj. selectedIndex; // the serial number of the selected option.
Var val = obj. options [index]. text;
7. Modify option
Var obj = document. getElementById ('myselect ');
Var index = obj. selectedIndex; // the serial number of the selected option.
Var val = obj. options [index] = new Option ("new text", "new Value ");
8. Delete select
Function removeSelect (){
Var mySelect =
Document. getElementById ("mySelect ");
MySelect. parentNode. removeChild (mySelect );
}
The complete code for the entire instance is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html">
<Head>
<Script language = JavaScript>
Function $ (id)
{
Return
Document. getElementById (id)
}
Function show ()
{
Var
SelectObj = $ ("area ")
Var
MyOption = document. createElement ("option ")
MyOption. setAttribute ("value", "10 ")
MyOption. appendChild (document. createTextNode ("Shanghai "))
Var
MyOption1 = document. createElement ("option ")
MyOption1.setAttribute ("value", "100 ")
MyOption1.appendChild (document. createTextNode ("Nanjing "))
SelectObj. appendChild (myOption)
SelectObj. appendChild (myOption1)
}
Function choice ()
{
Var
Index = $ ("area"). selectedIndex;
Var
Val = $ ("area"). options [index]. getAttribute ("value ")
If (val = 10)
{
Var I = $ ("context"). childNodes. length-1;
Var
Remobj = $ ("context"). childNodes [I];
Remobj. removeNode (true)
Var
Sh = document. createElement ("select ")
Sh. add (new
Option ("Pudong New Area", "101 "))
Sh. add (new Option ("Huangpu District", "102 "))
Sh. add (new Option ("Xuhui District", "103 "))
Sh. add (new
Option ("Putuo District", "104 "))
$ ("Context"). appendChild (sh)
}
If (val = 100)
{
Var I = $ ("context"). childNodes. length-1;
Var remobj = $ ("context"). childNodes [I];
Remobj. removeNode (true)
Var nj = document. createElement ("select ")
Nj. add (new
Option ("partition Area", "201 "))
Nj. add (new Option ("White Zone", "202 "))
Nj. add (new Option ("xianguang district", "203 "))
Nj. add (new
Option ("Qixia district", "204 "))
$ ("Context"). appendChild (nj)
}
}
Function calc ()
{
Var
X = $ ("context"). childNodes. length-1;
Alert (x)
}
Function
Remove ()
{
Var I = $ ("context"). childNodes. length-1;
Var
Remobj = $ ("context"). childNodes [I];
Remobj. removeNode (true)
}
</Script>
<Body>
<Div id = "context">
<Select id = "area" onchange = "choice ()">
</Select>
</Div>
<Input type = button value = "display"
Onclick = "show ()">
<Input type = button value = "computing node"
Onclick = "calc ()">
<Input type = button value = "delete"
Onclick = "remove ()">
</Body>
</Html>
Optional version: add, modify, and delete option elements in the select statement.
Function watch_ini () {// initial
For (var I = 0; I <arguments. length;
I ++ ){
Var word = document. createElement ("OPTION ");
Word. text =
Arguments [I];
Watch. keywords. add (word); // watch. is form
Name
}
}
Function watch_add (f) {// Add
Var word =
Document. createElement ("OPTION ");
Word. text =
F. word. value;
F. keywords. add (word );
}
But the above add ()
The method is only valid in IE. To be compatible with FF and Opera, the above Code is improved. The changed code is as follows: function watch_ini (){//
Initial
For (var I = 0; I <arguments. length; I ++ ){
Var oOption = new
Option (arguments [I], arguments [I]);
Document. getElementById ("MySelect") [I] = oOption;
}
}
Function
Watch_add (f) {// Add
Var oOption = new
Option (f. word. value, f. word. value );
F. keywords [f. keywords. length] = oOption;
}
The complete code for the entire instance is as follows:
<! Doctype html public "-// w3c // dtd html 4.0
Transitional // en ">
<Html>
<Head>
<Title> javascript
Select options text value </title>
<Meta name = "keywords"
Content = "javascript select options text value add modify delete
Set ">
<Meta name = "description" content = "javascript select options text
Value add modify delete set ">
<Script
Language = "javascript">
<! --
Function watch_ini () {// initial
For (var
I = 0; I <arguments. length; I ++ ){
Var oOption = new
Option (arguments [I], arguments [I]);
Document. getElementById ("MySelect") [I] = oOption;
}
}
Function
Watch_add (f) {// Add
Var oOption = new
Option (f. word. value, f. word. value );
F. keywords [f. keywords. length] = oOption;
}
Function watch_sel (f ){//
Edit
F. word. value = f. keywords [f. keywords. selectedIndex]. text;
}
Function
Watch_mod (f) {// modify
F. keywords [f. keywords. selectedIndex]. text =
F. word. value;
}
Function watch_del (f ){//
Delete
F. keywords. remove (f. keywords. selectedIndex );
}
Function
Watch_set (f) {// save
Var set = "";
For (var I = 0; I <f. keywords. length;
I ++ ){
Set + = f. keywords [I]. text +
";";
}
Confirm (set );
}
// -->
</Script>
</Head>
<Body>
<Form
Name = "watch" method = "post" action = "">
<Select id = "MySelect"
Name = "keywords" size = "10"
Onchange = "watch_sel (this. form)"> </select> <br>
<Script
Language = "javascript">
<! --
Watch_ini ("I", "you", "you", "he", "she", "it", "er ");
// Initial keyword
// -->
</Script>
<Input type = "text" name = "word"
/> <Br/>
<Input type = "button" value = "add"
Onclick = "watch_add (this. form);"/>
<Input type = "button" value = "modify"
Onclick = "watch_mod (this. form);"/>
<Input type = "button" value = "delete"
Onclick = "watch_del (this. form);"/>
<Input type = "button" value = "save"
Onclick = "watch_set (this. form);"/>
</Form>
Use a string to create an array:
<Script language = "javascript">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
