JavaScript 清空 Select 下拉框选项的几种方法

作者:白露时间:2026-10-22 08:17:32浏览:525

本文介绍在JavaScript中删除Select下拉框所有Option的多种实现方式。对比了传统循环移除与直接设置length为0两种方案,指出循环删除时因索引变化导致的潜在问题,并推荐直接重置length属性的简洁做法。同时包含将右侧Select选项全部移至左侧的完整示例代码,供开发者参考。

清空Select选项的JavaScript实现方案

JavaScript 删除select中的所有option的实例

方法一:


function DeleteOptions() 
  { 
    var obj = document.getElementsByTagName("select")[0]; 
    var selectOptions = obj.options; 
    var optionLength = selectOptions.length; 
    for(var i=0;i <optionLength;i++) 
    { 
      obj.removeChild(selectOptions[0]); 
    } 
  } 
 

方法二:(那右边的Select中的所有option移到左边的Select)


function MoveAllRightBtn(){ 
    var columnlength=$('queryColumn').length; 
    var TempText; 
    var TempValue; 
    for(var i=0;i<columnlength;i++){ 
      TempText=$('queryColumn').options[i].text; 
      TempValue=$('queryColumn').options[i].value; 
      $('queryColumn').remove(i); 
      $('SearchqqueryColumn').options.add(new Option(TempText,TempValue)); 
    } 
  } 

以上两个方法都不够好!因为它们一次性都册除不了,因为删除了一个它的$('queryColumn')在option的序号就变了! 都好的方法是:


$('SearchqqueryColumn').options.length = 0; 

或:


<script> 
function clearOption() 
{ 
  document.getElementById("testSelect").options.length = 0; 
} 
</script>  

(那右边的Select中的所有option移到左边的Select)实现如下:


function MoveAllRightBtn(){ 
    var columnlength=$('queryColumn').options.length; 
    var TempText; 
    var TempValue; 
    for(var i=0;i<columnlength;i++){ 
      TempText=$('queryColumn').options[i].text; 
      TempValue=$('queryColumn').options[i].value; 
      $('SearchqqueryColumn').options.add(new Option(TempText,TempValue)); 
    } 
    $('queryColumn').options.length = 0; 
  } 

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

作者最新文章