Javascript select Operation Reference Code

Source: Internet
Author: User

1. Determine whether the select option contains an Item with Value = "paraValue"
Function jsSelectIsExitItem (objSelect, objItemValue ){
Var isExit = false;
For (var I = 0; I <objSelect. options. length; I ++ ){
If (objSelect. options [I]. value = objItemValue ){
IsExit = true;
Break;
}
}
Return isExit;
}

2. add an Item to the select option
Function jsAddItemToSelect (objSelect, objItemText, objItemValue ){
// Determine whether the object exists
If (jsSelectIsExitItem (objSelect, objItemValue )){
Alert ("the Value of this Item already exists ");
} Else {
Var varItem = new Option (objItemText, objItemValue );
ObjSelect. options. add (varItem );
Alert ("successfully added ");
}
}

3. delete an Item from the select option
Function jsRemoveItemFromSelect (objSelect, objItemValue ){
// Determine whether the object exists
If (jsSelectIsExitItem (objSelect, objItemValue )){
For (var I = 0; I <objSelect. options. length; I ++ ){
If (objSelect. options [I]. value = objItemValue ){
ObjSelect. options. remove (I );
Break;
}
}
Alert ("deleted successfully ");
} Else {
Alert ("this select item does not exist ");
}
}


4. Delete the selected items in the select statement.
Function jsRemoveSelectedItemFromSelect (objSelect ){
Var length = objSelect. options. length-1;
For (var I = length; I> = 0; I --){
If (objSelect [I]. selected = true ){
ObjSelect. options [I] = null;
}
}
}

5. Modify the text of value = "paraValue" in the select option to "paraText"
Function jsUpdateItemToSelect (objSelect, objItemText, objItemValue ){
// Determine whether the object exists
If (jsSelectIsExitItem (objSelect, objItemValue )){
For (var I = 0; I <objSelect. options. length; I ++ ){
If (objSelect. options [I]. value = objItemValue ){
ObjSelect. options [I]. text = objItemText;
Break;
}
}
Alert ("modified successfully ");
} Else {
Alert ("this select item does not exist ");
}
}

6. Set the first Item of text = "paraText" in select to be selected.
Function jsSelectItemByValue (objSelect, objItemText ){
// Determine whether the object exists
Var isExit = false;
For (var I = 0; I <objSelect. options. length; I ++ ){
If (objSelect. options [I]. text = objItemText ){
ObjSelect. options [I]. selected = true;
IsExit = true;
Break;
}
}
// Show the result
If (isExit ){
Alert ("selected successfully ");
} Else {
Alert ("this select item does not exist ");
}
}

7. Set the Item of value = "paraValue" in select to be selected.
Document. all. objSelect. value = objItemValue;

8. Obtain the value of the selected item in the select statement.
Var currSelectValue = document. all. objSelect. value;

9. Get the text of the selected item of the select statement.
Var currSelectText = document. all. objSelect. options [document. all. objSelect. selectedIndex]. text;

10. Obtain the Index of the selected item of the select statement.
Var currSelectIndex = document. all. objSelect. selectedIndex;

11. Clear select items
Document. all. objSelect. options. length = 0;

The above is collected from the Internet. Now let's take a look at what we have done based on the above content.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> javascript select _ www.jb51.net </title> </pead> <body> <select name =" select "id =" select1 "> <option value = "1"> This is 1 </option> <option value = "2"> This is 2 </option> </select> the value is increased by 1, increase by 2, and delete option Delete select option </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

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.