Js Select operations (values, settings, and so on) _ javascript tips-js tutorial

Js operations on Select are very common and practical. When performing a select operation, you always need to refer to the information. It is better to summarize the information by yourself, here we will go over the select Operation in jquery (set the selected value)

During each select operation, we always need to provide the materials. We recommend that you summarize the information and review it later.

For example

1. Set the value to pxx.

$ (". Selector"). val ("pxx ");

2. Set text to pxx.

$ (". Selector"). find ("option [text = 'pxx']"). attr ("selected", true );

Here is the use of brackets. The equal signs in brackets are preceded by attribute names without quotation marks. In many cases, the use of brackets can simplify the logic.

3. Obtain the value of the selected item.

$ (". Selector"). val ();

4. Get the text of the selected item

$ (". Selector"). find ("option: selected"). text ();

The colon is used here to understand its usage and simplify the code.

The cascade of select is often used, that is, the value of the second select changes with the value selected by the first select. This is very simple in jquery.

For example:

The Code is as follows:

$ (". Selector1"). change (function (){

// Clear the second one first

$ (". Selector2"). empty ();

// In practical applications, the options here are generally generated using multiple loops.

Var option = $ (""). Val (1). text (" pxx ");

$ (". Selector2"). append (option );

});

Select statement for Js operations

Determine whether the select option contains an Item with Value = "paraValue"
Add an Item to the select option
Delete an Item from the select option
Delete the selected items in the select statement.
Modify the text of value = "paraValue" in the select option to "paraText"
Set the first Item of text = "paraText" in select to select
Set Item of value = "paraValue" in select to selected
Obtain the value of the selected item in the select statement.
Obtain the text of the selected item in the select statement.
Returns the Index of the selected item in the select statement.
Clear select items
Js Code

The Code is as follows:

// 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 of the select statement.
Var currSelectValue = document. all. objSelect. value;

// 9. Obtain 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;