The Options action Method Collection _ form effects in JavaScript select tags
Source: Internet
Author: User
JavaScript Operations Select tags in the options collection
Let's take a look at the options set in the following ways:
The Options.add (option) method adds an option object to the collection;
The Options.remove (index) method removes the specified item from the options collection;
Options (index) or Options.item (index) can get the specified items of the options collection through the indexes;
The JavaScript code is as follows:
var selecttag = null; Select tag
var optonlength = 10; Option number per fill
var colls = []; A reference to the SELECT tag options
Window.onload = function () {
Selecttag = document.getElementById ("Selectbox"); Get the Select tag
Colls = selecttag.options; Get references
Initselectbox (); Self-initialization select.options
};
Fill select.options with random numbers
function Initselectbox () {
var random = 0;
var optionitem = null;
var item = NULL;
Random = Math.floor (Math.random () *9000) +1000;
item = new Option (random,random); To create an option object by using the option () constructor
SelectTag.options.add (item); Add to the Options collection
}
Watchstate ();
}
Whether to empty the current options before adding a new option
function Isclearoption () {
return document.getElementById ("Chkclear"). Checked;
}
Empty Options Collection
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 ());
Lastoptiononfocus (colls.length-1);
Watchstate ();
}
Create an Option Object
function Createoption () {
var random = Math.floor (Math.random () *9000) +1000;
return new Option (random,random);
}
Deletes an option specified in the Options collection
function Removeoption (index) {
if (index >= 0) {
Colls.remove (index);
Lastoptiononfocus (colls.length-1);
}
Watchstate ();
}
Gets the currently selected option index
function Getselectedindex () {
return selecttag.selectedindex;
}
Get the total number of options collections
function Getoptionlength () {
return colls.length;
}
Gets the currently selected option text
function Getcurrentoptionvalue (index) {
if (index >= 0)
Return Colls (index). value;
}
Gets the currently selected option value
function Getcurrentoptiontext (index) {
if (index >= 0)
Return Colls (index). text;
}
Use the last item in the options collection to get focus
function Lastoptiononfocus (index) {
Selecttag.selectedindex = index;
}
Show when select Tag status
function Watchstate () {
var divwatch = document.getElementById ("Divwatch");
var innerhtml= "";
innerHtml = "option total:" + getoptionlength ();
innerHtml + = "<br/> Current item 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 was used when the option item was created, and this constructor has two versions of overloads.
1, var option = new option (Text,value); Here to capitalize 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 has a useful property of SelectedIndex, which may get the currently selected option index, or specify which item in the Options collection is selected through the index setting.
Select.selctedindex = select.options.length-1; Select the last item in the Options collection
var SelectedItem = select.options (Select.selectedindex);//Get the current selection
Selecteditem.text; Text of selected item
Selecteditem.value; The value of the selected item
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:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.