Rumah > hujung hadapan web > tutorial js > javascript删除select中的所有option代码分享

javascript删除select中的所有option代码分享

小云云
Lepaskan: 2018-02-06 09:18:12
asal
2605 orang telah melayarinya

本文主要和大家介绍javascript  删除select中的所有option的实例的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下,希望能帮助到大家。

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]); 
    } 
  }
Salin selepas log masuk

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


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

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


$(&#39;SearchqqueryColumn&#39;).options.length = 0;
Salin selepas log masuk

或:


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

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


function MoveAllRightBtn(){ 
    var columnlength=$(&#39;queryColumn&#39;).options.length; 
    var TempText; 
    var TempValue; 
    for(var i=0;i<columnlength;i++){ 
      TempText=$(&#39;queryColumn&#39;).options[i].text; 
      TempValue=$(&#39;queryColumn&#39;).options[i].value; 
      $(&#39;SearchqqueryColumn&#39;).options.add(new Option(TempText,TempValue)); 
    } 
    $(&#39;queryColumn&#39;).options.length = 0; 
  }
Salin selepas log masuk

相关推荐:

jQuery动态添加删除select项

jQuery动态添加删除select项(实现代码)

js删除select中重复项的实现代码_表单特效

Atas ialah kandungan terperinci javascript删除select中的所有option代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan