Options operation method set in javascriptSelect flag _ form special effect

The collection is comprehensive about using js to operate the options method in the select statement javascript to operate the options set in the Select flag
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
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 pWatch = document. getElementById ("pWatch ");
Var innerHtml = "";
InnerHtml = "Total options:" + getOptionLength ();
InnerHtml + ="
Current index: "+ getSelectedIndex ();
InnerHtml + ="
Current text: "+ getCurrentOptionText (getSelectedIndex ());
InnerHtml + ="
Current item value: "+ getCurrentOptionValue (getSelectedIndex ());
PWatch. innerHTML = innerHtml;
PWatch. 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

Use a random number to initialize SelectBox
Clear

Add option


Delete option


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;