Javascript：如何在下拉列表中使用remove（）撤消选项的删除？

Question

我有两个DropDownList：Min_Price＆amp; Max_Price和javascript，如果匹配条件，则从DropDownList中删除选项。例如：如果选择了DropDownList $ 30,000中的Min_Price，则删除DropDownList Max_Price的选项，但不删除默认值Max. Price选项。有没有办法撤消永久删除选项？我做了什么逻辑错误？谢谢。

＆＃13;

＆＃13;

var minPrice = document.querySelector('[name="Min_Price"]');
var maxPriceOptions = document.querySelectorAll('[name="Max_Price"] option');
var maxPrice = document.querySelector('[name="Max_Price"]');
var minPriceOptions = document.querySelectorAll('[name="Min_Price"] option');
var reg = /[\$\,]/g;

// Remove the lower value options from Max_Price DropDownList when a selected value in Min_Price DropdownList is greater than the Max_Price
minPrice.addEventListener("change", function(e){
    var v = +e.target.value.replace(reg, "");
    Array.from(maxPriceOptions).forEach(el=>el.value!==" " &&+el.value.replace(reg, "")<=v && el.remove())
});

// Remove the greater value options from Min_Price DropDownList when a selected value in Max_Price DropdownList is lower than the Max_Price
maxPrice.addEventListener("change", function(elems){
    var vr = +elems.target.value.replace(reg, "");
    Array.from(minPriceOptions).forEach(ele=>ele.value!==" " && +ele.value.replace(reg, "")>=vr && ele.remove())
});

＆＃13;

<select name="Min_Price">
    <option value=" ">Min. Price</option>
    <option value="0">$ 0</option>
    <option value="10000">$ 10,000</option>
    <option value="20000">$ 20,000</option>
    <option value="30000">$ 30,000</option>
    <option value="40000">$ 40,000</option>
    <option value="50000">$ 50,000</option>
</select>

<select name="Max_Price">
    <option value=" ">Max. Price</option>
    <option value="10000">$ 10,000</option>
    <option value="20000">$ 20,000</option>
    <option value="30000">$ 30,000</option>
    <option value="40000">$ 40,000</option>
    <option value="50000">$ 50,000</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用hidden属性作为option元素，而不是删除！

var minPrice = document.querySelector('[name="Min_Price"]');
var maxPriceOptions = document.querySelectorAll('[name="Max_Price"] option');
var maxPrice = document.querySelector('[name="Max_Price"]');
var minPriceOptions = document.querySelectorAll('[name="Min_Price"] option');
var reg = /[\$\,]/g;

// Remove the lower value options from Max_Price DropDownList when a selected value in Min_Price DropdownList is greater than the Max_Price
minPrice.addEventListener("change", function(e){
    var v = +e.target.value.replace(reg, "");
    Array.from(maxPriceOptions).forEach(el=> { el.value!==" " && el.value.replace(reg, "")<=v ? el.hidden = true : el.hidden = false;} )
});

// Remove the greater value options from Min_Price DropDownList when a selected value in Max_Price DropdownList is lower than the Max_Price
maxPrice.addEventListener("change", function(elems){
    var v = +elems.target.value.replace(reg, "");
    Array.from(minPriceOptions).forEach(el=> { el.value!==" " && el.value.replace(reg, "")>=v ? el.hidden = true : el.hidden = false;} )
});

<select name="Min_Price">
    <option value=" ">Min. Price</option>
    <option value="0">$ 0</option>
    <option value="10000">$ 10,000</option>
    <option value="20000">$ 20,000</option>
    <option value="30000">$ 30,000</option>
    <option value="40000">$ 40,000</option>
    <option value="50000">$ 50,000</option>
</select>

<select name="Max_Price">
    <option value=" ">Max. Price</option>
    <option value="10000">$ 10,000</option>
    <option value="20000">$ 20,000</option>
    <option value="30000">$ 30,000</option>
    <option value="40000">$ 40,000</option>
    <option value="50000">$ 50,000</option>
</select>