Common processing methods for the Select Drop-down menu in JavaScript

A small example:

The code is as follows	Copy Code
<form name= "Selectform" > <select name= "test" id= "T" onchange= "Change ()" > <option value= "1" label= "First" selected= "selected" > First </option> <option value= "2" label= "Second" > Second </option> <option value= "3" label= "Third" > Third </option> <option value= "4" label= "four" > Fourth </option> </select> </form>

First get the value of option, relatively simple, there is no Value property on the Select label,

The value of option is the value of the select.

So the value of the select value is calculated as follows

The code is as follows	Copy Code
var ss = Document.selectform.test; var value= ss.value;//1 or 2 ...

Many IDE prompts do not have Selectindex attribute hints on select and option, but JS can get the selection by Selectindex this property

Related information

Probably because Selectindex is a dynamic column, it always follows the selected property, so the IDE doesn't automatically prompt

Gets the value method for select text as follows:

The code is as follows	Copy Code
var ts1 = ss.options[ss.selectedindex].text;//First or second ...

You can also use innertext to get:

The code is as follows	Copy Code
var ts2 = ss.options[ss.selectedindex].innertext;//First or second ...

Can print the next look

The code is as follows	Copy Code
alert (TS1); alert (TS2);

Commonly used on select usage.

The code is as follows

Copy Code

1. Create a Select dynamically function Createselect () { var myselect = document.createelement_x ("select"); Myselect.id = "Myselect"; Document.body.appendChild (Myselect); } 2. Add Options option function AddOption () { To find an object based on its ID, var obj=document.getelementbyidx_x (' Myselect '); Add an option Obj.add (New Option ("text", "value"); This only works in IE. Obj.options.add (New Option ("text", "value")); This compatible with IE and Firefox } 3. Delete all options option function RemoveAll () { var obj=document.getelementbyidx_x (' Myselect '); Obj.options.length=null; } 4. Delete an option function Removeone () { var obj=document.getelementbyidx_x (' Myselect '); Index, to delete the ordinal number of the option, take the number of the currently selected option var Index=obj.selectedindex; Obj.options.remove (index); } 5. Get the value of options option var obj=document.getelementbyidx_x (' Myselect '); var Index=obj.selectedindex; Ordinal number, taking the number of the currently selected option var val = obj.options[index].value; 6. Get Options Option text var obj=document.getelementbyidx_x (' Myselect '); var Index=obj.selectedindex; Ordinal number, taking the number of the currently selected option var val = obj.options[index].text; 7. Modify Options option var obj=document.getelementbyidx_x (' Myselect '); var Index=obj.selectedindex; Ordinal number, taking the number of the currently selected option var val = obj.options[index]=new Option ("New text", "New value"); 8. Delete Select function Removeselect () { var myselect = document.getelementbyidx_x ("Myselect"); MySelect.parentNode.removeChild (Myselect); } 1. Determine if there is an item with the specified value function Existvalue (obj,value) { for (Var i=0;i<obj.options.length;i++) { if (Obj.options[i].value = = value) { return true; } } return false; } 2. Add an item function AddItem (obj,text,value) { var varitem = new Option (text,value); Obj.options.add (Varitem); } 3. Delete all item with value function Removeitems (obj,value) { for (Var i=0;i<obj.options.length;i++) { if (Obj.options[i].value = = value) { Obj.remove (i); } } } 4. Delete an option for index function RemoveItem (obj,index) { Obj.remove (index); } 5. Update value and text of index item function UpdateItem (obj,index,value,text) { Obj.options[index].value = value; Obj.options[index].text = text; } 6. Set the first item of the specified text in select to be selected function Selectitembytext (obj,text) { var isexit = false; for (Var i=0;i<obj.options.length;i++) { if (Obj.options[i].text = = text) { Obj.options[i].selected = true; return true; } } return false; } 7. Set the first item of the specified value in select to select function Selectitembyvalue (obj,value) { var isexit = false; for (Var i=0;i<obj.options.length;i++) { if (Obj.options[i].value = = value) { Obj.options[i].selected = true; return true; } } return false; } 8. Get the Value,index,text of the current selected item function GetValue (obj) { return obj.value; } 9. Get the index of the currently selected item function GetIndex (obj) { return obj.selectedindex; } 10. Get the text of the currently selected item function GetText (obj) { return obj.options[obj.selectedindex].text; } 11. Clear all options function Clear (obj) { obj.options.length = 0; }