Javascript：如何使用下拉列表中的remove（）撤消對選項的刪除？

Question

我得到兩個DropDownList： Min_Price和Max_Price和javascript，如果符合條件，它們將從兩個DropDownList中刪除該選項。 例如：如果從DropDownList Min_Price中選擇了$ 30,000 ，則將刪除具有DropDownList Max_Price選項，但不刪除默認值Max. Price Max. Price選項。 有沒有辦法撤銷永久刪除期權？ 我犯了任何邏輯錯誤嗎？ 謝謝。

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

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

Answer 1

對選項元素使用hidden屬性，而不是將其刪除！

 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>