添加删除的选择选项

Question

Currently I have a function I created that removes some options from a select menu based on a value passed from another select. I want to revert back to normal each time the function is called (add all the original options back)

HTML

<select id="Current-Tier" onchange="removetier();" class="form-control boosting-select">
        <option value="100">Bronze</option>
        <option value="200">Silver</option>
        <option value="300">Gold</option>
        <option value="400">Platinum</option>
        <option value="500">Diamond</option>
</select>

<select id="Desired-Tier" class="form-control boosting-select">
        <option value="100">Bronze</option>
        <option value="200">Silver</option>
        <option value="300">Gold</option>
        <option value="400">Platinum</option>
        <option value="500">Diamond</option>
</select>

JS

 function removetier(){

     var currentTierValue = document.getElementById("Current-Tier");
     var current = currentTierValue.options[currentTierValue.selectedIndex].value;

     var desiredDivisionValue = document.getElementById("Desired-Tier");
     for(var i=0;i<desiredDivisionValue.length;i++){
         if(desiredDivisionValue[i].value < current){
             desiredDivisionValue.remove(desiredDivisionValue[i]);

         }
     }

     Update_Desired_Rank_image();

 }

Answer 1

Have you considered adding the hidden attribute rather than deleting them?

Then the next time you receive a request, you can go through the list programmatically and remove the hidden attribute from each option.

An example of the hidden label, BTW, is

 <select id="Desired-Tier" class="form-control boosting-select"> <option value="100">Bronze</option> <option value="200">Silver</option> <option value="300">Gold</option> <option value="400">Platinum</option> <option value="500" hidden>Diamond</option> </select> 

If you run it you will see that Diamond is hidden. This way you always have access to all your options.

Answer 2

You can easily iterate over the select input and either store the removed items in an array or leverage the hidden attribute on the option tag:

Fiddle: https://jsfiddle.net/gLwwmh82/2/

HTML

    <select id="mySelect">
        <option value="">Select...</option>
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
        <option value="test3">Test3</option>
        <option value="test4">Test4</option>
        <option value="test5">Test5</option>
        <option value="test6">Test6</option>
    </select>

    <button id="btnRemove" onclick="remove()">Remove Half of Entries</button>
    <button id="btnReset" onclick="reset()">Reset</button>

JS

function reset() {
    var select = document.getElementById('mySelect');
    var options = select.querySelectorAll('option');
    for (var i = 0; i < options.length; i++) {
        options[i].removeAttribute('hidden');
    }
}

function remove() {
    var select = document.getElementById('mySelect');
    select.value = "";
    var entries = select.querySelectorAll('option');
    for (var i = 1; i < 5; i++) { 
        // Wrap the below line in your logic to know what to delete/not to delete
        entries[i].setAttribute('hidden', true);
    }
}