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

1None.gif判斷select選項中 是否存在Value="paraValue"的Item 
 2None.gif向select選項中 加入一個Item 
 3None.gif從select選項中 刪除一個Item 
 4None.gif刪除select中選中的項 
 5None.gif修改select選項中 value="paraValue"的text爲"paraText" 
 6None.gif設置select中text="paraText"的第一個Item爲選中 
 7None.gif設置select中value="paraValue"的Item爲選中 
 8None.gif得到select的當前選中項的value 
 9None.gif得到select的當前選中項的text 
10None.gif得到select的當前選中項的Index 
11None.gif清空select的項 
None.gifjs 代碼
None.gif
// 1.判斷select選項中 是否存在Value="paraValue"的Item        
ExpandedBlockStart.gif
function jsSelectIsExitItem(objSelect, objItemValue) {        
InBlock.gif    
var isExit = false;        
ExpandedSubBlockStart.gif    
for (var i = 0; i < objSelect.options.length; i++{        
ExpandedSubBlockStart.gif        
if (objSelect.options[i].value == objItemValue) {        
InBlock.gif            isExit 
= true;        
InBlock.gif            
break;        
ExpandedSubBlockEnd.gif        }
        
ExpandedSubBlockEnd.gif    }
        
InBlock.gif    
return isExit;        
ExpandedBlockEnd.gif}
         
None.gif   
None.gif
// 2.向select選項中 加入一個Item        
ExpandedBlockStart.gif
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {        
InBlock.gif    
//判斷是否存在        
ExpandedSubBlockStart.gif
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
InBlock.gif        alert(
"該Item的Value值已經存在");        
ExpandedSubBlockStart.gif    }
 else {        
InBlock.gif        
var varItem = new Option(objItemText, objItemValue);      
InBlock.gif        objSelect.options.add(varItem);     
InBlock.gif        alert(
"成功加入");     
ExpandedSubBlockEnd.gif    }
        
ExpandedBlockEnd.gif}
        
None.gif   
None.gif
// 3.從select選項中 刪除一個Item        
ExpandedBlockStart.gif
function jsRemoveItemFromSelect(objSelect, objItemValue) {        
InBlock.gif    
//判斷是否存在        
ExpandedSubBlockStart.gif
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
ExpandedSubBlockStart.gif        
for (var i = 0; i < objSelect.options.length; i++{        
ExpandedSubBlockStart.gif            
if (objSelect.options[i].value == objItemValue) {        
InBlock.gif                objSelect.options.remove(i);        
InBlock.gif                
break;        
ExpandedSubBlockEnd.gif            }
        
ExpandedSubBlockEnd.gif        }
        
InBlock.gif        alert(
"成功刪除");        
ExpandedSubBlockStart.gif    }
 else {        
InBlock.gif        alert(
"該select中 不存在該項");        
ExpandedSubBlockEnd.gif    }
        
ExpandedBlockEnd.gif}
    
None.gif   
None.gif   
None.gif
// 4.刪除select中選中的項    
ExpandedBlockStart.gif
function jsRemoveSelectedItemFromSelect(objSelect) {        
InBlock.gif    
var length = objSelect.options.length - 1;    
ExpandedSubBlockStart.gif    
for(var i = length; i >= 0; i--){    
ExpandedSubBlockStart.gif        
if(objSelect[i].selected == true){    
InBlock.gif            objSelect.options[i] 
= null;    
ExpandedSubBlockEnd.gif        }
    
ExpandedSubBlockEnd.gif    }
    
ExpandedBlockEnd.gif}
      
None.gif   
None.gif
// 5.修改select選項中 value="paraValue"的text爲"paraText"        
ExpandedBlockStart.gif
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {        
InBlock.gif    
//判斷是否存在        
ExpandedSubBlockStart.gif
    if (jsSelectIsExitItem(objSelect, objItemValue)) {        
ExpandedSubBlockStart.gif        
for (var i = 0; i < objSelect.options.length; i++{        
ExpandedSubBlockStart.gif            
if (objSelect.options[i].value == objItemValue) {        
InBlock.gif                objSelect.options[i].text 
= objItemText;        
InBlock.gif                
break;        
ExpandedSubBlockEnd.gif            }
        
ExpandedSubBlockEnd.gif        }
        
InBlock.gif        alert(
"成功修改");        
ExpandedSubBlockStart.gif    }
 else {        
InBlock.gif        alert(
"該select中 不存在該項");        
ExpandedSubBlockEnd.gif    }
        
ExpandedBlockEnd.gif}
        
None.gif   
None.gif
// 6.設置select中text="paraText"的第一個Item爲選中        
ExpandedBlockStart.gif
function jsSelectItemByValue(objSelect, objItemText) {            
InBlock.gif    
//判斷是否存在        
InBlock.gif
    var isExit = false;        
ExpandedSubBlockStart.gif    
for (var i = 0; i < objSelect.options.length; i++{        
ExpandedSubBlockStart.gif        
if (objSelect.options[i].text == objItemText) {        
InBlock.gif            objSelect.options[i].selected 
= true;        
InBlock.gif            isExit 
= true;        
InBlock.gif            
break;        
ExpandedSubBlockEnd.gif        }
        
ExpandedSubBlockEnd.gif    }
              
InBlock.gif    
//Show出結果        
ExpandedSubBlockStart.gif
    if (isExit) {        
InBlock.gif        alert(
"成功選中");        
ExpandedSubBlockStart.gif    }
 else {        
InBlock.gif        alert(
"該select中 不存在該項");        
ExpandedSubBlockEnd.gif    }
        
ExpandedBlockEnd.gif}
        
None.gif   
None.gif
// 7.設置select中value="paraValue"的Item爲選中    
None.gif
document.all.objSelect.value = objItemValue;    
None.gif       
None.gif
// 8.得到select的當前選中項的value    
None.gif
var currSelectValue = document.all.objSelect.value;    
None.gif       
None.gif
// 9.得到select的當前選中項的text    
None.gif
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    
None.gif       
None.gif
// 10.得到select的當前選中項的Index    
None.gif
var currSelectIndex = document.all.objSelect.selectedIndex;    
None.gif       
None.gif
// 11.清空select的項    
None.gif
document.all.objSelect.options.length = 0;   
發佈了124 篇原創文章 · 獲贊 7 · 訪問量 25萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章