Home > Developer > JavaScript
Options set in the Select flag for javascript operations
Let's take a look at these methods in the options set:
The options. add (option) method adds an option object to the set;
The options. remove (index) method removes the specified item from the options set;
Options (index) or options. item (index) can be used to obtain the specified items in the options set through the index;
The javascript code is as follows:
Var selectTag = null; // select tag
Var OPTONLENGTH = 10; // number of options filled each time
Var colls = []; // reference to select tag options
Window. onload = function (){
SelectTag = document. getElementById ("SelectBox"); // obtain the select tag
Colls = selectTag. options; // get reference
// InitSelectBox (); // select. options
};
// Fill select. options with a random number
Function initSelectBox (){
Var random = 0;
Var optionItem = null;
Var item = null;
If (colls. length> 0 & isClearOption ()){
ClearOptions (colls );
}
For (var I = 0; I <OPTONLENGTH; I ++ ){
Random = Math. floor (Math. random () * 9000) + 1000;
Item = new Option (random, random); // create an Option object through the option () constructor
SelectTag. options. add (item); // add to the options set
}
WatchState ();
}
// Whether to clear the current options before adding the new option
Function isClearOption (){
Return document. getElementById ("chkClear"). checked;
}
// Clear the options set
Function clearOptions (colls ){
Var length = colls. length;
For (var I = length-1; I> = 0; I --){
Colls. remove (I );
}
}
// Add a new option
Function addOption (){
Colls. add (createOption ());
Lastoptionfocus (colls. length-1 );
WatchState ();
}
// Create an option object
Function createOption (){
Var random = Math. floor (Math. random () * 9000) + 1000;
Return new Option (random, random );
}
// Delete an option specified in the options set
Function removeOption (index ){
If (index> = 0 ){
Colls. remove (index );
Lastoptionfocus (colls. length-1 );
}
WatchState ();
}
// Obtain the selected option Index
Function getSelectedIndex (){
Return selectTag. selectedIndex;
}
// Obtain the total number of options Sets
Function getOptionLength (){
Return colls. length;
}
// Obtain the selected option text
Function getCurrentOptionValue (index ){
If (index> = 0)
Return colls (index). value;
}
// Obtain the currently selected option value
Function getCurrentOptionText (index ){
If (index> = 0)
Return colls (index). text;
}
// Use the last item in the options set to obtain the focus
Function lastoptionfocus (index ){
SelectTag. selectedIndex = index;
}
// Display the status when the select flag is enabled
Function watchState (){
Var divWatch = document. getElementById ("divWatch ");
Var innerHtml = "";
InnerHtml = "Total options:" + getOptionLength ();
InnerHtml + = "<br/> current index:" + getSelectedIndex ();
InnerHtml + = "<br/> current item text:" + getCurrentOptionText (getSelectedIndex ());
InnerHtml + = "<br/> current item value:" + getCurrentOptionValue (getSelectedIndex ());
DivWatch. innerHTML = innerHtml;
DivWatch. align = "justify ";
}
Note that the option () constructor is used when the Option item is created. This constructor has two versions of overload.
1. var option = new Option (text, value); // The upper case Option ()
2. var option = new Option ();
Option. text = text;
Option. value = value;
I personally prefer the first method to create an option object.
In addition, the select tag also has a more useful attribute: selectedIndex, which may be used to obtain the selected option index or set which item in the specified options set to be selected through the index.
Select. selctedIndex = select. options. length-1; // select the last item in the options set.
Var selectedItem = select. options (select. selectedIndex); // obtain the selected item
SelectedItem. text; // The text of the selected item
SelectedItem. value; // The value of the selected item
<BODY>
<Select name = "SelectBox">
</Select>
<Hr/>
<Div id = "divWatch" style = "background-color: beige; width = 220;">
</Div>
<Hr/>
<H4> use a random number to initialize SelectBox <Input type = "button" value = "Init" onclick = "initSelectBox ()"/> <input type = "checkbox" name = "chkClear"/> clear
<Hr/>
<H4> Add option <Input type = "button" value = "create" onclick = "addOption ()"/>
<Hr/>
<H4> delete option items <Input type = "button" value = "delete" onclick = "removeOption (colls. length-1)"/>
</BODY>
Check whether selected
If (objSelect. selectedIndex>-1 ){
// Indicates the selected
} Else {
// The description is not selected.
}
Delete selected items
ObjSelect. options [objSelect. selectedIndex] = null;
Add item
ObjSelect. options [objSelect. length] = new Option ("hello", "hello ");
Modify selected items
ObjSelect. options [objSelect. selectedIndex] = new Option ("hello", "hello ");
Obtain the text of the selected item.
ObjSelect. options [objSelect. selectedIndex]. text;
Obtain the value of the selected item.
ObjSelect. options [objSelect. selectedIndex]. value;
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
