禁用基于另一个选择以及数据库数据的选择选项答案

【问题标题】：Disable select options based on another select along with db data禁用基于另一个选择以及数据库数据的选择选项
【发布时间】：2017-08-08 15:04:11
【问题描述】：

我有一个会议注册，用户可以选择在 2 天内注册研讨会。他们不能在第二天选择同一个工作坊。但是，每个研讨会都有 40 名参与者的软限制，因此当注册加载时，系统会查询哪些研讨会还有剩余席位。

代码如下：

<select name="workshop1" required="required" id="workshop1">
    <option disabled selected value=""> -- select an option -- </option>
    <option value=”wkshp1”>Workshop name</option>
    <option value=”wkshp2”>Workshop name</option>
    <option value=”wkshp3”>Workshop name</option>
    <option value=”wkshp4”>Workshop name</option>
    <option value=”wkshp5”>Workshop name</option>
    <option value=”wkshp6”>Workshop name</option>
</select>
<select name="workshop1" required="required" id="workshop2">
    <option disabled selected value=""> -- select an option -- </option>
    <option value=”wkshp1”>Workshop name</option>
    <option value=”wkshp2”>Workshop name</option>
    <option value=”wkshp3”>Workshop name</option>
    <option value=”wkshp4”>Workshop name</option>
    <option value=”wkshp5”>Workshop name</option>
    <option value=”wkshp6”>Workshop name</option>
</select>

我正在使用 Stack-overflow 中的这段代码，它运行良好。

$(document).ready(function() {
    $("#workshop1").change(function() {
        $("select[name=workshop2] option").removeAttr("disabled");
        var workshopName = $("select[name=workshop1]").val();
        $("select[name=workshop2] option[value=" + workshopName + "]").attr("disabled", "disabled");
    });
});

但是，虽然我可以禁用已满的页面加载研讨会，但上面的 jquery 代码将重新启用我在 Workshop2 中禁用的选项（研讨会已满）。如何遍历所有选项并排除那些已满的选项。第 1 天和第 2 天的研讨会相同。

【问题讨论】：

$("select[name=workshop2] option").removeAttr("disabled"); 重新启用所有选项。为什么需要这个代码行？
原因是如果我为第 1 天选择了研讨会 2，那么第 2 天的研讨会 1 被禁用。但在我完成注册之前，我改变了主意，选择了workshop3。无论如何，我想我已经有了解决方案。现在测试一下。

标签： jquery forms select options

【解决方案1】：

好的，通过执行以下操作来解决这个问题。因为完整的研讨会是用空白值输出的，即。，脚本可以检查这一点。如果用户选择第 1 天的研讨会 1，然后第 2 天的研讨会 2 能够将第 1 天更改为第 1 天，我添加了对研讨会 2 的检查。

$(document).ready(function(){
        $("#workshop1").change(function(){
            $("#workshop2 option").each(function(){
                if ($(this)["0"].value) {
                    $(this).removeAttr("disabled");
                }
            });             
            $("select[name=workshop2] option[value=" + $("select[name=workshop1]").val() + "]").attr("disabled", "disabled");
        });
        $("#workshop2").change(function(){
            $("#workshop1 option").each(function(){
                if ($(this)["0"].value) {
                    $(this).removeAttr("disabled");
                }
            });     
            $("select[name=workshop1] option[value=" + $("select[name=workshop2]").val() + "]").attr("disabled", "disabled");
        }); 
    });

【讨论】：