1判斷select選項中 是否存在Value="paraValue"的Item
2向select選項中 加入一個Item
3從select選項中 刪除一個Item
4刪除select中選中的項
5修改select選項中 value="paraValue"的text為"paraText"
6設置select中text="paraText"的第一個Item為選中
7設置select中value="paraValue"的Item為選中
8得到select的當前選中項的value
9得到select的當前選中項的text
10得到select的當前選中項的Index
11清空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) {???????
??? //判斷是否存在???????
??? 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;??

轉載于:https://www.cnblogs.com/jcomet/archive/2008/07/14/1242793.html

總結

以上是生活随笔為你收集整理的Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。