jquery Operation select Valuation Assignment and Setting Selected Instance

Contents of this section:

jquery realizes the value and assignment of select drop-down box, and sets the selected method encyclopedia.

For example < select class="selector" > < /select >

1. Set value to select the items of pxx

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

2. Set text to select the item of pxx

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

There is a use of brackets. The equal sign in brackets is preceded by the attribute name, without quotation marks.
Many times, the use of brackets can make logic very simple.

3. Get the value of the currently selected item

$(".selector").val();

4. Get the text of the currently selected item

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

The colon is used here, and mastering its usage and turning 1 against 3 will also make the code concise.

A cascade of select is often used, i.e. the value of the second select changes with the selected value of the first select.

This is very simple in jquery.

For example:

$(".selector1").change(function(){ 
//  Empty the first 2 A  
$(".selector2").empty(); 
//  In practical applications, the option1 Generally, multiple are generated by loop  
var option = $("<option>").val(1).text("pxx"); 
$(".selector2").append(option); 
});

Js Operation Select Encyclopedia

Determine whether Item with Value= "paraValue" exists in select option
Add 1 Item to the select option
Remove 1 Item from select option
Delete selected items in select
Modify text for value = "paraValue" in select option to "paraText"
Set the first Item of text= "paraText" in select to be selected
Set Item of value= "paraValue" in select to be selected
Get the value of the currently selected item of select
Get the text of the currently selected item of select
Get the Index of the currently selected item of select
Empty the items of select

js code

1. Judge whether there is Item with Value= "paraValue" in select option

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) { 
// Judge whether it exists or not  
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
alert(" The Item Adj. Value Value already exists "); 
} else { 
var varItem = new Option(objItemText, objItemValue); 
objSelect.options.add(varItem); 
alert(" Join successfully "); 
} 
}

3. Delete 1 Item from select option

function jsRemoveItemFromSelect(objSelect, objItemValue) { 
// Judge whether it exists or not  
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(" The select Medium   The item does not exist "); 
} 
}

4. Delete selected items in select

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 text with value= "paraValue" in select option to "paraText"

function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { 
// Judge whether it exists or not  
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(" Successful modification "); 
} else { 
alert(" The select Medium   The item does not exist "); 
} 
}

6. Set the first Item of text= "paraText" in select to be selected

function jsSelectItemByValue(objSelect, objItemText) { 
// Judge whether it exists or not  
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 Give a result  
if (isExit) { 
alert(" Successfully selected "); 
} else { 
alert(" The select Medium   The item does not exist "); 
} 
}

7. Set Item with value= "paraValue" in select to be selected

document.all.objSelect.value = objItemValue;

8. Get the value of the currently selected item of select

var currSelectValue = document.all.objSelect.value;

9. Get the text of the currently selected item of select

var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

10. Get the Index of the currently selected item of select

var currSelectIndex = document.all.objSelect.selectedIndex;

11. Empty the items of select

document.all.objSelect.options.length = 0;