Question

我有一个简单的PHP脚本，其表单有两个选择字段，这两个字段都是数字值。该脚本还具有两个字段之和的最大值。我正在尝试动态过滤第二个下拉菜单，以便用户无法选择超过最大值。例如，如果我的最大值为10，则第一个选择下拉列表中将包含1-10。然后，选择6的用户将只能在第二个选择下拉列表中选择0-4。

我知道这应该是相当简单的，但我是一个完整的JavaScript / jQuery新手。我已经搜索了SO和Google，但我不了解我已经看过的足够多的示例知道从哪里开始，更不用说弄清楚如何根据我的需求定制它们。我已经提供了我已经提供的代码，它显然没有我需要的任何过滤。

一些示例代码（假设已经定义了$ maximum）：

<script type="text/javascript">
    var max = <?php echo $maximum; ?>;
</script>

<select name="dropdown1" id="dropdown1">
<?php
for ($i = 1; $i <= $maximum; $i++)
{   
    echo '<option value="'.$i.'">'.$i.'</option>';  
}
?>
</select>
<select name="dropdown2" id="dropdown2">
<?php
for ($i = 0; $i <= $maximum; $i++)
{   
    echo '<option value="'.$i.'">'.$i.'</option>';  
}
?>
</select>

提前致谢。

我现在在它自己的.js文件中有以下jquery：

$(document).ready(function() {
// var max ??
$("#dropdown1").change(function() {
    var selectedVal = $(this).find("option:selected").val();
    $("#dropdown2 option").removeAttr("disabled").removeAttr("selected");
    $("#dropdown2 option").each(function() {
        if($(this).val() > max - selectedVal*1)
            $(this).attr("disabled", "disabled");

    });       
});
});

但是，我的PHP脚本到jQuery中有点困难。我想我必须创建一个JavaScript变量，但不太确定如何将它传递给jQuery。如果我将jQuery嵌入到相同的PHP脚本中，我只能通过回显它来解决问题，但我不知道如何将它作为参数传递。

Answer 1

Here是一个工作小提琴。并且，相关的jQuery代码：

$(document).ready(function() {
    $("#select1").change(function() {
        var selectedVal = $(this).find("option:selected").val();

        $("#select2 option").each(function() {
            if($(this).val() >= selectedVal)
                $(this).attr("disabled", "disabled");

        });
    });
});

Answer 2

我为您的案例更新 legendofawesomeness 的code

根据另一个选择下拉列表过滤一个HTML选择下拉列表

2 个答案: