Set of options operation methods in javascript Select flag

Source: Internet
Author: User

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

<Select name = "SelectBox">
<Div id = "divWatch" style = "background-color: beige; width = 220;">
<H4> use a random number to initialize SelectBox <Input type = "button" value = "Init" onclick = "initSelectBox ()"/> <input type = "checkbox" name = "chkClear"/> clear
<H4> Add option <Input type = "button" value = "create" onclick = "addOption ()"/>
<H4> delete option items <Input type = "button" value = "delete" onclick = "removeOption (colls. length-1)"/>
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;

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.