Js operation Select encyclopedia (value, setting selection, etc.)_javascript skills

jquery operation select (value, setting selection)

Every time you operate select, you always have to go out and look up the information. Why not summarize it yourself, and I will look here in the future.

For example,

1. Set the item with value to pxx to select

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

2. Set text to pxx and select the item

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

There is a usage of square brackets. The equal sign in the square brackets is preceded by the attribute name without quotation marks. Many times, the use of square 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();

Colon is used here. Mastering its usage and applying inferences will also make the code simpler.

The cascade of selects 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:

Copy code The code is as follows:

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

// Clear the second one first

$(".selector2").empty();

// Actual In applications, multiple options here are generally generated using loops

var option = $("").val(1).text("pxx");

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

});

Js Operation Select Encyclopedia

Judge whether the select option exists Item with Value="paraValue"
Add an Item to the select option
Delete an Item from the select option
Delete the selected item in the select
Modify the text of value="paraValue" in the select option For "paraText"
Set the first Item with text="paraText" in the select to be selected
Set the Item with value="paraValue" in the select to be selected
Get the value of the currently selected item in the select
Get the text of the currently selected item of select
Get the Index of the currently selected item of select
Clear the selected item
js code

Copy code The code is as follows:

/// 1. Determine whether there is an Item with Value="paraValue" in the 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
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 it 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(" Successfully deleted");
} else {
alert("This item does not exist in this selection");
}
}


// 4. Delete selection The selected item in
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 select The text of value="paraValue" in the option is "paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//Determine whether it 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("Successfully modified");
} else {
alert("This item does not exist in the selection");
}
}

// 6. Set the first Item with text="paraText" in the select to be selected
function jsSelectItemByValue(objSelect, objItemText) {
//Judge whether it 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("Successfully selected");
} else {
alert("This item does not exist in the selection");
}
}

// 7. Set select The Item with value="paraValue" is 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. Clear the selected item
document.all .objSelect.options.length = 0;