javascript操作select参考代码

 更新时间:2008年06月01日 20:17:56   作者:  
用js控制select的方法,大家可以参考下
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;   

上面的是从网上搜集的,现在看看根据上面的内容做的

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • 如何基于webRTC实现人脸识别功能

    如何基于webRTC实现人脸识别功能

    WebRTC技术包含了音视频编解码技术、传输技术、流媒体服务器技术等,涵盖了音视频处理和传输的方方面面,下面这篇文章主要给大家介绍了关于如何基于webRTC实现人脸识别的相关资料,需要的朋友可以参考下
    2022-12-12
  • 详解ES6 Fetch API HTTP请求实用指南

    详解ES6 Fetch API HTTP请求实用指南

    本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript浅层克隆与深度克隆示例详解

    JavaScript浅层克隆与深度克隆示例详解

    这篇文章主要给大家介绍了关于JavaScript浅层克隆与深度克隆的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Javascript注入技巧

    Javascript注入技巧

    Javascript注入技巧...
    2007-06-06
  • 开启BootStrap学习之旅

    开启BootStrap学习之旅

    当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢,你如果也喜欢Bootstrap前端开发框架,不要错过这次旅行
    2016-05-05
  • layui操作列按钮个数和文字颜色的判断实例

    layui操作列按钮个数和文字颜色的判断实例

    今天小编就为大家分享一篇layui操作列按钮个数和文字颜色的判断实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实现时间范围效果

    JavaScript实现时间范围效果

    这篇文章主要为大家详细介绍了JavaScript实现时间范围效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • js实现浏览器的各种菜单命令比如打印、查看源文件等等

    js实现浏览器的各种菜单命令比如打印、查看源文件等等

    浏览器的各种菜单命令比如打印、查看源文件、加入收藏等等,这些在js中时完全可以实现的,本文搜集整理了一些,感兴趣的朋友可以参考下
    2013-10-10
  • js获取地址栏参数的两种方法

    js获取地址栏参数的两种方法

    这篇文章主要为大家详细介绍了js获取地址栏参数的两种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • js使用generator函数同步执行ajax任务

    js使用generator函数同步执行ajax任务

    这篇文章主要为大家详细介绍了js使用generator函数同步执行ajax任务,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论