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;

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); 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

<BODY>
<select name= "Selectbox" >
</Select>
<div id= "Divwatch" style= "background-color:beige;width=220;" >
</div>
<input type= "button" value= "Init" onclick= "Initselectbox ()"/> <input type= "checkbox" Name= "Chkclear"/> Clear
<input type= "button" value= "Create" onclick= "addoption ()"/>
<input type= "button" value= "delete" onclick= "removeoption (colls.length-1)"/>
</BODY>
Detect if a check is selected
if (Objselect.selectedindex >-1) {
Description selected
} else {
Description not selected
}

Delete selected items
Objselect.options[objselect.selectedindex] = null;

Add Items
Objselect.options[objselect.length] = new Option ("Hello", "Hello");

Modify the items in the selection
Objselect.options[objselect.selectedindex] = new Option ("Hello", "Hello");

Get the text of the selected item
Objselect.options[objselect.selectedindex].text;

Get 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: info-contact@alibabacloud.com 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.