JavaScript deletes all option code sharing in select-JS Tutorial-php.cn

JavaScript deletes all option code sharing in select

小云云

Release： 2018-02-06 09:18:12

Original

2632 people have browsed it

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

Copy after login

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

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

Copy after login

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:

$(&#39;SearchqqueryColumn&#39;).options.length = 0;

Copy after login

or:

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

Copy after login

( 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=$(&#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; 
  }

Copy after login

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!