Я создал функцию поиска недвижимости, в которой пользователь будет вводить ценовой диапазон. Я добавил два поля выбора, чтобы минимизировать ошибку пользователя, одно для минимальной цены, а другое для максимальной цены. Я хочу использовать динамическую форму для дальнейшей минимизации ошибок при вводе.
Например, минимальная цена выбора имеет следующие значения:
- $ 100 тыс. (По умолчанию)
- $ 200k
- $ 300k
- $ 400k
- $ 500k
- $ 600k
- $ 700k
- $ 800k
- $ 900k
- $ 1M
Хотя максимальный выбор цены такой же, как указано выше, но без 100 000 долларов США и с дополнительными 2 миллионами долларов США, со значением по умолчанию 200 000 долларов США.
Я хочу, чтобы у меня была функция, которая не только проверяла запись на странице, но и динамически изменяла параметры выбора для максимальной цены. Поэтому, когда пользователь выбирает минимальную цену, в полях максимальной цены параметры не будут отображать выбранную минимальную цену и ниже.
Таким образом, в начале, если пользователь выбирает минимум в 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-коде?