JavaScript deletes all option code sharing in select

This article mainly introduces to you the relevant information about javascript deleting all option instances in the select. I hope this article can help you realize such a function. Friends who need it can refer to it. I hope it can help you.

javascript Delete all option instances in select

Method 1:

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]); 
    } 
  }

Method 2: (Move all options in the Select on the right to the Select on the left)

function MoveAllRightBtn(){ 
    var columnlength=$('queryColumn').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)); 
    } 
  }

Neither of the above two methods is good enough! Because they cannot be deleted at once, because if one of them is deleted, the serial number of $('queryColumn') in the option will change!
The best way is:

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

or:

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

( Then all options in the Select on the right are moved to the Select on the left) and the implementation is as follows:

function MoveAllRightBtn(){ 
    var columnlength=$('queryColumn').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; 
  }

Related recommendations:

jQuery dynamically adds and deletes select items

jQuery dynamically adds and deletes select items (implementation code)

js implementation code for deleting duplicate items in select _Form special effects

The above is the detailed content of JavaScript deletes all option code sharing in select. For more information, please follow other related articles on the PHP Chinese website!