Home > Developer > Web Develop

Specific explanations for the use of select in HTML

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<script language= "JavaScript" >
<!--
A new option is 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 shows how option is used--
<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. Join 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. Change 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 () {
//Add employees to the drop-down list on the fly
For (var i = 0; i < json.length; i++) {
var newoption = new Option (json[i].empname, Json[i].empid, i);
//Add employee information to the staff 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) {
//Infer that this drop-down list is selected
Objdeal.options[i].selected=true;
}
}
}
}

11Check if there is a check 2if(objselect.selectedindex > -1)  { 3// description selected 4 } Else  { 5// description not checked 6 } 7 82Delete a selected item 9Objselect.options[objselect.selectedindex] = NULL;Ten One3 Add Item AObjselect.options[objselect.length] = New Option ("Hello","Hello"); - -4change the item in the selection theObjselect.options[objselect.selectedindex] = New Option ("Hello","Hello"); - -5get the text of the selected item -Objselect.options[objselect.selectedindex].text; + -6get the value of the selected item +Objselect.options[objselect.selectedindex].value; A

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
what use of in html how to use select tag in html use of tag in html use of meta in html use of meta tag in html use of p tag in html what use of tag in html

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More