Question

我创建了一个房地产搜索功能，用户将在其中输入价格范围。我已经放置了两个选择字段以最小化用户错误，一个用于最低价格，另一个用于最高价格。我想利用动态表单来进一步减少输入错误。

例如，最低价格选择具有以下值：

$ 100k（默认）
$ 20万
$ 300K
$ 400K
$ 500K
$ 600K
$ 700K
$ 80万
$ 900K
$ 1M

虽然最高价格选择与上述相同但没有$ 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代码有错误吗？

Answer 1

您可以使用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();
        }
    });

});

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

1 个答案: