Js操作Select是很常见的,也是比较实用的,每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。
一.js操作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的项 
// 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;
二.jQuery操作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(){ 
// 先清空第二个 
$(".selector2").empty(); 
// 实际的应用中,这里的option一般都是用循环生成多个了 
var option = $("<option>").val(1).text("pxx"); 
$(".selector2").append(option); 
}); 
本文转载自其他地方,欢迎转载,但是请注明来源。有些地方不对的欢迎一起讨论
转载:http://www.jb51.net/article/42523.htm
原文:http://www.cnblogs.com/peijie-tech/p/5085357.html