CODEWITHSUNDEEP
javascripthtml
TYL
TYL

Reputation: 83

Javascript: How to remove options from 2nd dropdownlist if the value of the 1st dropdownlist is greater than the 2nd one and vice versa?

I was trying to removing the options from Dropdownlist "Max_Price" e.g: if the user has selected option value="200000" in Dropdownlist "Min_Price", the options in Dropdownlist "Max_Price" which are lower than 200000 should be removed: option value="50000", "100000" & "200000" but without removing the default option with value=" ". Can javascript do this?

I been searching for the answer but with no luck as they are all using jquery to solve related/alike questions. Thank you so much.

<select name="Min_Price">
    <option value=" ">Min. Price</option>
    <option value="0">$ 0</option>
    <option value="50000">$ 50,000</option>
    <option value="100000">$ 100,000</option>
    <option value="200000">$ 200,000</option>
    <option value="300000">$ 300,000</option>
    <option value="400000">$ 400,000</option>
    <option value="500000">$ 500,000</option>
</select>

<select name="Max_Price">
    <option value=" ">Max. Price</option>
    <option value="50000">$ 50,000</option>
    <option value="100000">$ 100,000</option>
    <option value="200000">$ 200,000</option>
    <option value="300000">$ 300,000</option>
    <option value="400000">$ 400,000</option>
    <option value="500000">$ 500,000</option>
    <option value="600000">$ 600,000</option>
</select>

Upvotes: 1

Views: 33

Answers (1)

Shishir Arora
Shishir Arora

Reputation: 5943

var minPrice = document.querySelector('[name="Min_Price"]');
var maxPriceOptions = document.querySelectorAll('[name="Max_Price"] option');
var reg = /[\$\,]/g;
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())
});
<select name="Min_Price">
    <option value=" ">Min. Price</option>
    <option value="0">$ 0</option>
    <option value="50000">$ 50,000</option>
    <option value="100000">$ 100,000</option>
    <option value="200000">$ 200,000</option>
    <option value="300000">$ 300,000</option>
    <option value="400000">$ 400,000</option>
    <option value="500000">$ 500,000</option>
</select>

<select name="Max_Price">
    <option value=" ">Max. Price</option>
    <option value="50000">$ 50,000</option>
    <option value="100000">$ 100,000</option>
    <option value="200000">$ 200,000</option>
    <option value="300000">$ 300,000</option>
    <option value="400000">$ 400,000</option>
    <option value="500000">$ 500,000</option>
    <option value="600000">$ 600,000</option>
</select>

Upvotes: 1

Related Questions