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 代码
//  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;  

/*select控件常见操作*/ 

//1、向select里添加option 
function selectOptionAdd(oSelect, sName, sValue) { 
var oOption = document.createElement("option"); 
oOption.appendChild(document.createTextNode(sName)); 

if (arguments.length == 3) { 
oOption.setAttribute("value", sValue); 
} 

oSelect.appendChild(oOption); 
} 
//在select控件的指定位置插入一项 
function addOptionAtPosition(oSelect, optionValue, optionText, position) { 
if (document.all) //IE 
{ 
var option = document.createElement("option"); 
option.value = optionValue; 
option.innerText = optionText; 
oSelect.insertBefore(option, oSelect.options[position]); 
} 
else { //其他浏览器 
oSelect.insertBefore(new Option(optionValue, optionText), oSelect.options[position]); 
} 
} 


//2、删除select里的option 
function selectOptionRemoveItem(oSelect) { 
if (oSelect.selectedIndex > -1) {//说明选中 
for (var i = 0; i < oSelect.options.length; i++) { 
if (oSelect.options[i].selected) { 
oSelect.remove(i); 
i = i - 1; //注意这一行 ************************** 
} 
} 
} 
} 
//select移除一项 
function removeOneOption(oSelect, optionValue) { 
var selOptions = oSelect.options; 
for (var i = 0; i < selOptions.length; i++) { 
if (selOptions[i].value == optionValue) { 
oSelect.remove(i); 
break; 
} 
} 
} 

// 清空select所有项目 
function removeSelItems(oSelect) { 
//删除select中所有项 
oSelect.options.length = 0; 
} 

//3、移动select里的option到另一个select中 
function selectsMoveOption(oSelectFrom, oSelectTo) { 
for (var i = 0; i < oSelectFrom.options.length; i++) { 
if (oSelectFrom.options[i].selected) { 
/*if 里的代码也可用下面几句代码代替 var op = oSelectFrom.options[i];oSelectTo.options.add(new Option(op.text, op.value));oSelectFrom.remove(i); */ 
oSelectTo.appendChild(oSelectFrom.options[i]); 
i = i - 1; 
} 
} 
} 

//4、select里option的上下移动 
function selectMoveUp(oSelect) { 
for (var i = 1; i < oSelect.length; i++) {//最上面的一个不需要移动，所以直接从i=1开始 
if (oSelect.options[i].selected) { 
/*在进行上下两项互换时，也可以使用以下代码，但是效率很低，因为每一次的Dom操作都将导致整个页面的重新布局，所以不如直接修改元素的属性值。var oOption = oSelect.options[i];var oPrevOption = oSelect.options[i-1];oSelect.insertBefore(oOption,oPrevOption);向下移动同理 */ 
if (!oSelect.options.item(i - 1).selected) {//上面的一项没选中，上下交换 
var selText = oSelect.options[i].text; 
var selValue = oSelect.options[i].value; 

oSelect.options[i].text = oSelect.options[i - 1].text; 
oSelect.options[i].value = oSelect.options[i - 1].value; 
oSelect.options[i].selected = false; 

oSelect.options[i - 1].text = selText; 
oSelect.options[i - 1].value = selValue; 
oSelect.options[i - 1].selected = true; 
} 
} 
} 
} 

function selectMoveDown(oSelect) { 
for (var i = oSelect.length - 2; i >= 0; i--) {//向下移动，最后一个不需要处理，所以直接从倒数第二个开始 
if (oSelect.options.item(i).selected) { 
if (!oSelect.options.item(i + 1).selected) {//下面的Option没选中，上下互换 
var selText = oSelect.options.item(i).text; 
var selValue = oSelect.options.item(i).value; 

oSelect.options.item(i).text = oSelect.options.item(i + 1).text; 
oSelect.options.item(i).value = oSelect.options.item(i + 1).value; 
oSelect.options.item(i).selected = false; 

oSelect.options.item(i + 1).text = selText; 
oSelect.options.item(i + 1).value = selValue; 
oSelect.options.item(i + 1).selected = true; 
} 
} 
} 
} 
//5、select里option的排序 
/*这里借助Array对象的sort方法进行操作，sort方法接受一个function参数，可以在这个function里定义排序时使用的算法逻辑。*/ 

//因为排序可以按Option的Value排序，也可以按Text排序，这里按Value排序 
function sortItems(oSelect) { 
var selLength = oSelect.options.length; 
var arr = new Array(); 
var arrLength; 
//将所有Option放入array 
for (var i = 0; i < selLength; i++) { 
arr[i] = oSelect.options[i]; 
} 
arrLength = arr.length; 
arr.sort(sortNumber); //排序 
//先将原先的Option删除 
while (selLength--) { 
oSelect.options[selLength] = null; 
} 
//将经过排序的Option放回Select中 
for (i = 0; i < arrLength; i++) { 
selectOptionAdd(oSelect, arr[i].text, arr[i].value); 
//oSelect.add(new Option(arr[i].text,arr[i].value)); 
} 
} 

//6.鼠标悬浮时获取select的options的index 
function getOptionIndex(oSelect) { 
var theIndex = -1; 
if (oSelect.options.length > 0) { 
theIndex = Math.floor((event.offsetY + 2) / (oSelect.offsetHeight / oSelect.options.length)); 
if (theIndex < 0) theIndex = 0; 
else if (theIndex > oSelect.options.length) theIndex = oSelect.options.length; 
} 
return theIndex; 
}

转载于:https://www.cnblogs.com/feilong3540717/archive/2011/09/29/2195706.html