动态价值范围选择表的最佳方法是什么？

Question

I have created a real estate search function where in the user will input the price range. I have put two select fields to minimize user error, one for the minimum price and the other for maximum price. I want to utilize a dynamic form to further minimize entry error.

For example, the minimum price select has the following values:

• $100k (default)
• $200k
• $300k
• $400k
• $500k
• $600k
• $700k
• $800k
• $900k
• $1M

While the maximum price select has the same as above but without $100k and with additional $2M+, with a default value of $200k.

What I want to happen is to have a function that will not only validate the entry on-page but also dynamically change the select options for the maximum price. So when the user selects a minimum price, the maximum price field options will not display the selected minimum price and below.

So at the start, if the user selects $500k minimum, the maximum automatically changes to $600k while removing from the options anything below it.

What's the best approach for this?

Thanks in advance!

---

Update: I followed Jake's answer and I can't make it work.

Here's the code of the form and script:

<form name="search" action="/search/" method="get">
<label>Price Range: </label>
Between:
<select name="min_price"> 
<option value="1">1M</option> 
<option value="2">2M</option> 
...
<option value="15">15M</option> 
<option value="20">20M</option> 
</select> 
and
<select name="max_price"> 
<option value="2">2M</option> 
<option value="3">3M</option> 
... 
<option value="30">30M+</option> 
</select> 
...
</form>

<script type="text/javascript"> 
$("#min_price").change(function(){
    var min = $(this).val();
    $("#max_price").find("option").each(function(){
        if (this.value <= min) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
});
</script> 

I'm using wordpress and it has jQuery 1.4.4. How can I make it work? Is there an error on my html code?

Answer 1

You can do this client side (in browser) using JavaScript. For example, with jQuery:

$("#min_price").change(function(){

    var min = $(this).val();
    $("#max_price").find("option").each(function(){
        if (this.value <= min) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });

});