添加刪除的選擇選項

Question

當前，我有一個創建的函數，該函數根據另一個選擇傳遞的值從選擇菜單中刪除一些選項。 我想在每次調用該函數時恢復正常（將所有原始選項加回去）

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

您是否考慮過添加hidden屬性而不是刪除它們？

然后，下次您收到請求時，可以以編程方式瀏覽列表，並從每個選項中刪除hidden屬性。

hidden標簽BTW的示例是

 <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> 

如果運行它，您將看到Diamond隱藏。 這樣，您始終可以訪問所有選項。

Answer 2

您可以輕松地遍歷select輸入，然后將刪除的項目存儲在數組中，或者利用option標簽上的hidden屬性：

小提琴： 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);
    }
}