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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript:如何清除select控件的所有option项相关的知识，希望对你有一定的参考价值。

以下是我的代码，不能删除所有option项，但是我好像又没有错

<html>
<head>
<script>
var op1=new Array("豫园","长风公园");
var op2=new Array("天安门","颐和园");
function ss()


var ctrl1=document.getElementById("sel1");
var ctrl2=document.getElementById("sel2");
var gtext=ctrl1.options[ctrl1.selectedIndex].text;

if(gtext=="上海")

var op=op1;

else if(gtext=="北京")

var op=op2;

alert(ctrl2.options.length);
for(var i=0;i<ctrl2.options.length;i++)

ctrl2.removeChild(ctrl2.options[i]);


for(var i=0;i<op.length;i++)

var opt=document.createElement("option");
var textnode=document.createTextNode(op[i]);
opt.appendChild(textnode);
ctrl2.appendChild(opt);


</script>
</head>
<body>
<select id="sel1" onchange="ss()">
<option>上海</option>
<option>北京</option>
</select>
<select id="sel2">
</select>
</body>
</html>

for(var i=0;i<ctrl2.options.length;i++)

ctrl2.removeChild(ctrl2.options[i]);

这一句，你取得是ctrl2.options.length，当你删除一项的时候，这个数值减一，所以不可能完全删除。
在此基础上的修改是：
for(var i=0;i<ctrl2.options.length;)

ctrl2.removeChild(ctrl2.options[i]);
参考技术A

1、清空select所有option项

document.getElementById("sel1").length=0;

2、循环option项，逐个删除

function clearn()
    var ctrl2=document.getElementById("id");
    for(var i=0;i<ctrl2.options.length;) 
     
        ctrl2.removeChild(ctrl2.options[i]); 
    

 参考技术B ddl.options.clear;//ddl名称

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控件的所有option项的主要内容，如果未能解决你的问题，请参考以下文章

Javascript 操作select控件

如何动态清除用户控件中的所有控件？

JavaScript封装一个实用的select控件

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

清除控件后，我应该如何停止控件中的计时器？

如何查看javascript object对象的所拥有的属性值