A complete collection of jquery operation select instances

This article summarizes jQueryGetting the Text and Value selected by Select; jQuery adding/Deleting the Select operation of Select's Option item, implementing the method of obtaining and assigning values, and setting the selection methods, and corresponding explanations are given.

jQuery gets the Text and Value selected by Select:
Grammar explanation:

$("#select_id").change(function(){//code...});    //为Select添加事件，当选择其中一项时触发   
var checkText=$("#select_id").find("option:selected").text();   //获取Select选择的Text   
var checkValue=$("#select_id").val();   //获取Select选择的Value   
var checkIndex=$("#select_id ").get(0).selectedIndex;   //获取Select选择的索引值  
var maxIndex=$("#select_id option:last").attr("index");   //获取Select最大的索引值 jQuery设置Select选择的Text和Value:

$("#select_id ").get(0).selectedIndex=1;   //设置Select索引值为1的项选中   
$("#select_id ").val(4);    //设置Select的Value值为4的项选中   
$("#select_id option[text='jQuery']").attr("selected", true);    //设置Select的Text值为jQuery的项选中

jQuery adds/removes the Option item of Select:

Gramtax explanation:

$("#select_id").append("<option value=&#39;Value&#39;>Text</option>");   //为Select追加一个Option(下拉项)   
$("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>");   //为Select插入一个Option(第一个位置)   
$("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)   
$("#select_id option[index=&#39;0&#39;]").remove();   //删除Select中索引值为0的Option(第一个)   
$("#select_id option[value=&#39;3&#39;]").remove();   //删除Select中Value=&#39;3&#39;的Option   
$("#select_id option[text=&#39;4&#39;]").remove();   //删除Select中Text=&#39;4&#39;的Option

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

For example

1. Set the item with value to pxx to select

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

2. Set Text is selected for the pxx 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();

The colon is used here, master its Usage by analogy will also make the code concise.
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.

$(".selector1").change(function(){ 
// 先清空第二个 
$(".selector2").empty(); 
// 实际的应用中，这里的option一般都是用循环生成多个了 
var option = $("<option>").val(1).text("pxx"); 
$(".selector2").append(option); 
});

Determine whether there is an Item with Value="paraValue" in the select option
Add an Item to the select option
Delete an Item from the select option
Delete the item selected in the select option
Modify the text of value="paraValue" in the select option to "paraText"
Set the first Item of text="paraText" in the select to be selected
Set the Item of value="paraValue" in the 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
Clear the selected item

// 1.判断select选项中 是否存在Value="paraValue"的Item 
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.向select选项中 加入一个Item 
function jsAddItemToSelect(objSelect, objItemText, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
alert("该Item的Value值已经存在"); 
} else { 
var varItem = new Option(objItemText, objItemValue); 
objSelect.options.add(varItem); 
alert("成功加入"); 
} 
}

// 3.从select选项中 删除一个Item 
function jsRemoveItemFromSelect(objSelect, objItemValue) { 
//判断是否存在 
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("成功删除"); 
} else { 
alert("该select中 不存在该项"); 
} 
}

// 4.删除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.修改select选项中 value="paraValue"的text为"paraText" 
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { 
//判断是否存在 
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("成功修改"); 
} else { 
alert("该select中 不存在该项"); 
} 
}

// 6.设置select中text="paraText"的第一个Item为选中 
function jsSelectItemByValue(objSelect, objItemText) { 
//判断是否存在 
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出结果 
if (isExit) { 
alert("成功选中"); 
} else { 
alert("该select中 不存在该项"); 
} 
}

// 7.设置select中value="paraValue"的Item为选中 
document.all.objSelect.value = objItemValue;
// 8.得到select的当前选中项的value 
var currSelectValue = document.all.objSelect.value;
// 9.得到select的当前选中项的text 
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的当前选中项的Index 
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的项 
document.all.objSelect.options.length = 0;

The above is the detailed content of A complete collection of jquery operation select instances. For more information, please follow other related articles on the PHP Chinese website!