码迷,mamicode.com
首页 > Web开发 > 详细

js操作HTML下拉列表标签

时间:2015-08-20 12:16:24      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

判断select选项中 是否存在Value="paraValue"的Item
技术分享向select选项中 加入一个Item
技术分享从select选项中 删除一个Item
技术分享删除select中选中的项
技术分享修改select选项中 value="paraValue"的text为"paraText"
技术分享设置select中text="paraText"的第一个Item为选中
技术分享设置select中value="paraValue"的Item为选中
技术分享得到select的当前选中项的value
技术分享得到select的当前选中项的text
技术分享得到select的当前选中项的Index
技术分享清空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; 

js操作HTML下拉列表标签

标签:

原文地址:http://www.cnblogs.com/ding1006/p/4744378.html

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