JavaScript与jQuery操作Select元素完整指南

jQuery操作Select基础方法

jQuery操作Select元素（取值、设置选中状态等）

每次处理Select控件时，总需要查阅文档，不如将其整理成笔记，方便日后随时查阅。

假设有一个如下定义的Select元素：<select class="selector"></select>

1. 设置Value为pxx的选项为选中状态

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

2. 设置Text为pxx的选项为选中状态

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

这里用到了中括号选择器的用法，等号左侧为属性名，无需添加引号。掌握中括号的选择技巧，往往能让代码逻辑更加简洁清晰。

3. 获取当前选中项的Value值

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

4. 获取当前选中项的Text文本

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

此处使用了冒号伪类选择器，熟练运用此类语法并触类旁通，也能使代码编写更加精简高效。

在实际开发中，经常遇到Select的级联操作，即第二个Select的内容随第一个Select的选择结果而变化。在jQuery中实现这一功能非常简单。

示例如下：

 
$(".selector1").change(function(){
// 首先清空第二个Select的内容
$(".selector2").empty();
// 在实际应用场景中，这里的option通常是通过循环动态生成的
var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);
}); 

原生JavaScript操作Select完整示例

JavaScript操作Select元素完整指南

判断select选项中是否存在Value="paraValue"的Item

向select选项中添加一个Item

从select选项中删除一个Item

删除select中当前选中的项

修改select选项中value="paraValue"的text为"paraText"

设置select中text="paraText"的第一个Item为选中状态

设置select中value="paraValue"的Item为选中状态

获取select当前选中项的value

获取select当前选中项的text

获取select当前选中项的Index索引

清空select的所有选项

js 代码

 
// 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) {
// 判断该Item是否已存在
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) {
// 判断该Item是否存在
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) {
// 判断该Item是否存在
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) {
// 判断该Item是否存在
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;
} 
} 
// 显示操作结果
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;