让我们一起爱米兰
站内搜搜:
移动设备
请扫描二维码
或访问
m.milan100.com
您所在的位置 -> 米兰百分百 -> JAVASCRIPT -> JS操作select总结

JS操作select总结

点击数:1376 发表时间:2010-05-26 16:35:47 作者: 来源链接:
分享到:
分享到微信

JS动态改变select选择变更option的index值

 

 

document.getElementById("louyuming").options[0].selected=true;

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;       

}        

Javascript 操作select是表单中常见的一种,今天删除多个select值的时候出现了问题,搞了半天原来是索引引起的(即删除的时候要从索引大的开始删,然后再删除索引小的,否则删除了索引小的后索引大的索引就变化了,再删除时就会出现问题--问题的关键是for循环是要从大到小,而不是常规的从0到 length)

// 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;    

         }    

     }    

}      

1JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客判断select选项中 是否存在Value="paraValue"的Item

2JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客向select选项中 加入一个Item

3JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客从select选项中 删除一个Item

4JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客删除select中选中的项

5JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客修改select选项中 value="paraValue"的text为"paraText"

6JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客设置select中text="paraText"的第一个Item为选中

7JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客设置select中value="paraValue"的Item为选中

8JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客得到select的当前选中项的value

9JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客得到select的当前选中项的text

10JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客得到select的当前选中项的Index

11JS动态改变select选择变更option的index值 - xuhejun.2007 - xuhejun的博客清空select的项

======================================================================

动态删除select中的所有options:

function deleteAllOptions(sel){

sel.options.length=0;

}

动态删除select中的某一项option:

function deleteOption(sel,indx){

sel.options.remove(indx);

}

动态添加select中的项option:

function addOption(sel,text,value){

sel.options.add(new Option(text,value));

}

上面在IE和FireFox都能测试成功,希望以后可以用上。

===========================================

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为选中    

objSelect.value = objItemValue;    

       

// 8.得到select的当前选中项的value    

var currSelectValue = objSelect.value;    

       

// 9.得到select的当前选中项的text    

var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text;    

       

// 10.得到select的当前选中项的Index    

var currSelectIndex = objSelect.selectedIndex;    

       

// 11.清空select的项    

objSelect.options.length = 0;   

 

整个实例的完整代码如下:

 

 

 

 

 

 

 

 

 

 

 

0
很 好
0
一 般
0
差 劲
热门新闻
相关文章
上一篇: firefox select操作
下一篇: JavaScript(js)字符串替换函数replace的用法
评论区
匿名

返回首页 | 收藏本页 | 回到顶部
Copyright 2010. 米兰百分百 Powered By Bridge.
京ICP备15050557号