Select label sets the selected option method by default. select label

Select label sets the selected option method by default. select label

There are two methods.

FirstThe <select> attribute is used to set the selected items. This method can control the output results in dynamic languages such as php in the background as needed.

< select id = "sel" >< option value = "1" >1</ option >< option value = "2" selected = "selected" >2</ option >< option value = "3" >3</ option ></ select >

SecondTo control the selected items through front-end js:

<Script type = "text/javascript"> function change () {document. getElementById ("sel") [2]. selected = true ;} </script> <select id = "sel"> <option value = "1"> 1 </option> <option value = "2"> 2 </option> <option value = "3"> 3 </option> </select> <input type = "button" value = "modify" onclick = "change () "/>

The js Code for getting the <select> label selected item text is:

var val = document.all.Item.options[document.all.Item.selectedIndex].textvar i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value;

Tips for some other operations on the <select> label are as follows:

1) dynamically create select

function createSelect(){var mySelect = document.createElement( "select" );mySelect.id = "mySelect" ;document.body.appendChild(mySelect);}

2) Add option

Function addOption () {// find the object by id, var obj = document. getElementById ('myselect'); // Add an option obj. add (new Option ("text", "value "));}

3) delete all option options

function removeAll(){var obj=document.getElementById( 'mySelect' );obj.options.length=0;}

4) delete an option

Function removeOne () {var obj = document. getElementById ('myselect'); // index. The sequence number of the option to be deleted. The number var index = obj of the selected option is used here. selectedIndex; obj. options. remove (index );}

5) obtain the option value

Var obj = document. getElementById ('myselect'); var index = obj. selectedIndex; // The serial number. The serial number var val = obj. options [index]. value;

6) obtain the option text

Var obj = document. getElementById ('myselect'); var index = obj. selectedIndex; // The serial number. The serial number var val = obj. options [index]. text;

7) Modify option

Var obj = document. getElementById ('myselect'); var index = obj. selectedIndex; // The serial number. The serial number var val = obj. options [index] = new Option ("new text", "new Value ");

8) delete select

function removeSelect(){var mySelect = document.getElementById( "mySelect" );mySelect.parentNode.removeChild(mySelect);}

The default Selection Method for the preceding select tag settings is all the content shared by the editor. I hope you can give us a reference and support the help house.