码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)

时间:2016-06-09 10:52:46      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

转自:http://www.cnblogs.com/zyh-nhy/archive/2007/08/08/847876.html
 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;   

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)

标签:

原文地址:http://www.cnblogs.com/ztoz/p/5572012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!