Javascript 操作select控件

Posted springsnow

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript 操作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[objselect.options.length] = varitem;
       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控件的主要内容,如果未能解决你的问题,请参考以下文章

javascript 怎么获取dropdownlist上的值,

JavaScript封装一个实用的select控件

SELECT控件操作的JS代码示例

Jquery 操作Html 控件 CheckBoxRadioSelect 控件

javascript:如何清除select控件的所有option项

Javascript 中调参数的脚本onclick="select(this)" this 怎么解释?