對這文章發表回應
發表限制: 非會員 可以發表
發表者： 冷日 發表時間： 2009/1/16 3:20:03
Javascript 操作select控件大全（新增、修改、刪除、選中、清空、判斷存在等）
Posted on 2007-08-08 14:56 禮拜一 閱讀(16254) 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的項
判斷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中選中的項 functionjsRemoveSelectedItemFromSelect(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為選中
functionjsSelectItemByValue(objSelect, objItemText)
{ // 判斷是否存在 varisExit = 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 ; 原文出處：Javascript 操作select控件大全（新增、修改、刪除、選中、清空、判斷存在等） - 成為自己比什麼都重要！