Блог

Я создал функцию поиска недвижимости, в которой пользователь будет вводить диапазон цен. Я поместил два поля выбора, чтобы минимизировать ошибки пользователя, одно для минимальной цены, а другое для максимальной цены. Я хочу использовать динамическую форму для дальнейшего минимизации ошибок ввода.

Например, выбор минимальной цены имеет следующие значения:

• 100 тысяч долларов (по умолчанию)
• 200 тысяч долларов
• 300 тысяч долларов
• 400 тысяч долларов
• 500 тысяч долларов
• 600 тысяч долларов
• 700 тысяч долларов
• 800 тысяч долларов
• 900 тысяч долларов
• $ 1 млн

В то время как выбор максимальной цены такой же, как указано выше, но без $ 100 тыс. и с дополнительными $ 2 млн , со значением по умолчанию в $ 200 тыс.

Чего я хочу, так это иметь функцию, которая будет не только проверять запись на странице, но и динамически изменять параметры выбора по максимальной цене. Таким образом, когда пользователь выбирает минимальную цену, параметры поля максимальная цена не будут отображать выбранную минимальную цену и ниже.

Итак, в начале, если пользователь выбирает минимум в 500 тысяч долларов, максимум автоматически изменяется на 600 тысяч долларов при удалении из параметров всего, что ниже этого.

Какой наилучший подход для этого?

Заранее спасибо!

Обновление: Я следовал ответу Джейка, и я не могу заставить его работать.

Вот код формы и скрипта:

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

Я использую WordPress, и у него есть jQuery 1.4.4. Как я могу заставить это работать? Есть ли ошибка в моем HTML-коде?

Вы можете сделать это на стороне клиента (в браузере) с помощью JavaScript. Например, с помощью jQuery:

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

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

});