正文

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判2012-06-17 17:53:00

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/edwardguo/53524.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;  

 

----------------------------------------------------------------------------------------------------------------------------------------------

<script type="text/javascript">
    function FillYearSelect() {
        {
            var control = document.getElementById("Year");
            if (control != null) {
                var date = new Date();
                var thisYear = date.getFullYear();
                var i = 2008;
                for (var i = 2008; i <= thisYear; i++) {
                    if (!OptionIsExist(control, i))
                    {
                        alert(i);
                        var item = new Option(i, i);
                        control.options.add(item);
                    }
                }
            }
        }
    }   
    function OptionIsExist(objSelect, objValue)
    {
        var exist = false;
        for (var i = 0; i <objSelect.options.length; i++)
        {
            if (objSelect.options[i].value == objValue)
            {
                exist = true;
                break;
            }
         }
         return exist;
     }      
</script>

 

阅读(1411) | 评论(0)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

暂无评论
您需要登录后才能评论,请 登录 或者 注册