Javascript 操作select控件(新增、修改、刪除、選中、清空、判斷存在等)

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代碼

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.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.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.selected == true){      
            objSelect.options = 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.value == objItemValue) {          
                objSelect.options.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.text == objItemText) {          
            objSelect.options.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;


function delOption(oSel){ // 刪除option  if (oSel.selectedIndex>=0) {  oSel.options.remove(oSel.selectedIndex);  } else {  alert("請先至少選擇一個關鍵字");  };}

上述代碼在IE下正常運行,但在Firefox下卻報錯:
oSel.options.remove is not a function.

最後發現只要作一下小改動就可兼容IE和FF :)
改動後的代碼如下:

function delOption(oSel){ // 刪除option  if (oSel.selectedIndex>=0) {  oSel.remove(oSel.selectedIndex);  } else {  alert("請先至少選擇一個關鍵字");  };}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章