我创建了一个房地产搜索函数,用户将在其中输入价格范围。我放置了两个选择字段,以尽量减少用户错误,一个用于最低价格,另一个用于最高价格。我想利用动态表单来进一步减少输入错误。
例如,最小价格选择有以下值:
- 100美元(默认)
- 200美元
- 300美元
- 400美元
- 500美元
- 600美元
- 700美元
- 800美元
- 900美元
- 1美元
而最大价格选择与上述相同,但没有$100k,并增加了$2M+,默认值为$200k。
我想要发生的是有一个函数,它不仅将验证页面上的条目,而且还将动态更改最大价格的选择选项。因此,当用户选择最小价格时,最大价格字段选项将不会显示所选的最小价格及以下。
所以在开始的时候,如果用户选择了$500k的最小值,最大值自动变为$600k,同时从选项中删除低于它的值。
最好的方法是什么?
提前感谢!
更新:我按照杰克的回答做了,但我不能让它工作。
下面是表单和脚本的代码:<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();
}
});
});