Use of HTML Select

Source: Internet
Author: User

1) Hide and show of select:

$ ("SelectList"). style.display=$ ("SelectList"). style.display== "Block"? " None ":" Block ";

2) Select Can not be used:

<select disabled= "value" >

document.getElementById ("Leveldroplist"). Disabled = "value"; Not available

document.getElementById ("Leveldroplist"). Disabled = "value"; Available

< head>
< SCRIPT language= "JavaScript" >
<!--
A new option was added at the bottom of the Oselect list
function onload () {
var ooption = document.createelement ("OPTION");
ooption.text= "Ferrari";
Ooption.value= "4";
Oselect.add (ooption);
}

function Fnchange () {
Odata.value+=ocars.options[ocars.selectedindex].text + "";
}



-
</script>

<body onload= "onload ()" >
<!--manually add a select-->
<!--1 uses the SELECT element to create a drop-down list box-->
<select name= "Cats" size= "1" >
< OPTION value= "1" >calico
< OPTION value= "2" >tortie
< OPTION value= "3" Selected>siamese
</select>

<P>
<!--2 Select elements Create multiple selection list boxes by setting the SIZE and multiple label properties. To get the selected option for multiple selection list boxes, you must traverse the options collection and check if SELECTED is set to true. -
<select id= "Oselect" name= "Cars" size= "3" Multiple> <!--here set 3 and multiple-->
<option value= "1" selected>bmw
< OPTION value= "2" >porsche
< OPTION value= "3" selected>mercedes
</select>

<P>
<!--3 The following demonstrates the use of option--
<select id= "Ocars" size= "1" onchange= "Fnchange ()" >
< OPTION value= "1" > BMW
<option value= "2" > Porsche
<option value= "3" selected> Big Ben
</select>

<P>
< TEXTAREA id= "OData" ></TEXTAREA>


</body>

Attached: Tips for some Select

1. Dynamic creation of SELECT

function Createselect () {

var myselect = document.createelement ("select");
Myselect.id = "Myselect";
Document.body.appendChild (Myselect);
}

2. Add Options option

function AddOption () {

Find objects by ID,
var Obj=document.getelementbyid (' Myselect ');

Add an option
Obj.add (New Option ("text", "value"));
}

3. Remove all options option

function RemoveAll () {
var Obj=document.getelementbyid (' Myselect ');

obj.options.length=0;

}

4. Delete an option

function Removeone () {
var Obj=document.getelementbyid (' Myselect ');

Index, to remove the ordinal of the option, take the ordinal of the currently selected option

var Index=obj.selectedindex;
Obj.options.remove (index);

}

5. Get the value of option options

var Obj=document.getelementbyid (' Myselect ');

var Index=obj.selectedindex; Ordinal, take the ordinal of the currently selected option

var val = obj.options[index].value;

6. Get the text of options option

var Obj=document.getelementbyid (' Myselect ');

var Index=obj.selectedindex; Ordinal, take the ordinal of the currently selected option

var val = obj.options[index].text;

7. Modify Options option

var Obj=document.getelementbyid (' Myselect ');

var Index=obj.selectedindex; Ordinal, take the ordinal of the currently selected option

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

9. Set the Select OptIn to be

function Removeselect () {
Dynamically add employees to the worker drop-down list
for (var i = 0; i < json.length; i++) {
var newoption = new Option (json[i].empname, Json[i].empid, i);
Add employee information to the worker drop-down list
ObjDeal.options.add (newoption);
The ID of the customer salesman is not empty
if (empbydealempid!= "" | | | empbydealempid!=0) {
The employee ID equals the value in the drop-down list, the drop-down list is selected
if (Empbydealempid==objdeal.options[i].value) {
Determine if this drop-down list is selected
Objdeal.options[i].selected=true;

Use of HTML Select

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.