• 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;
  • 相关阅读:
    mysql 在orderby和limit混合使用时重复数据问题
    springboot启动类 注解
    redis RDB和AOF两种持久化的区别
    C#解析逻辑字符串【x>y&&a>b||p=r】
    删除例如联想笔记本系统隐藏分区
    通过贝叶斯算法实现自动识别类别
    将可执行exe文件注册成windows服务
    Windows10中的IIS10安装php manager和IIS URL Rewrite 2.0组件的方法
    添加钩子监听全局鼠标或键盘事件
    C# DateTime.Now和DateTime.UtcNow的区别
  • 原文地址:https://www.cnblogs.com/time-on/p/7850762.html
Copyright © 2020-2023  润新知