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;   

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8722.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论