Javascript 根据两个选项和总可用性筛选两个选择字段

我的表格中有两个成人和儿童选项：

<select name="BKG_Adult">
    <option value="1" data-price="1000">1</option>
    <option value="2" data-price="2000">2</option>
    <option value="3" data-price="3000">3</option>
    <option value="4" data-price="4000">4</option>
</select>

<select name="BKG_Child">
    <option value="0" data-price="0">0</option>
    <option value="1" data-price="500">1</option>
    <option value="2" data-price="1000">2</option>
    <option value="3" data-price="1500">3</option>
</select>

<input type="hidden" id="dynamic_availability" name="dynamic_availability" value="4">

隐藏字段“动态可用性”由页面加载时的外部web服务填充，以提供巡演中可用的座位总数。这些选项也会在页面加载时填充

该表格的主要规则是，至少有一名成年人必须参加旅游。剩下的座位可以由儿童和成人组成

如果选择了2名成年人，我需要减少儿童选择中的选项数量，以确保用户总共不能选择超过4人。同样，如果在“儿童选择”中选择了2个儿童，则我必须限制“成人选择”中的值，但仍要确保至少选择了一个成人

本质上，这将使用子和成人选择字段的onchange事件，但复杂性是根据上面定义的规则过滤选项。当然，如果用户要减少在一个字段中选择的选项数量，那么在另一个字段中选择的选项数量应该增加，这样用户仍然可以选择最多4个

是否有人知道此类功能的示例，或者如何在vanilla javascript或jquery中实现这些功能

$(function() {
    var max = $("#dynamic_availability").val(),
        $adult = $("#adult"),
        $child = $("#child");
    fillCmb($adult, 1, max);
    fillCmb($child, 0, max - 1);
    $adult.on("change", function() {
        var cant = $(this).val();
        fillCmb($child, 0, max - cant);
    });
    $child.on("change", function() {
        var cant = $(this).val();
        fillCmb($adult, 1, max - cant);
    });

    function fillCmb($cmb, min, max) {
        var val = $cmb.val();
        $cmb.empty();
        for (var i = min; i <= max; i++)
            $cmb.append("<option value=\"" + i + "\">" + i + "</option>");
        if (val)
            $cmb.val(val);
    }
});

函数changeSelectelement，其他SelectValue{ var options=element.findoption； forx=0；options.length；x++{ 如果选项[x]。值+值>4{ 选项[x]。删除； } } } $“成人”、“儿童”。关于“更改”，函数{ 如果此.attr'id'=“成人”{ 更改选择$'child'，this.val； }否则{ 更改选择$成人'，this.val； } }; 1. 2. 3. 4. 0 1. 2. 3.

---

感谢您的回复，但是当选择成人值时，它会将儿童选择设置为零。实际上，它应该保持当前的价值。不幸的是，这不是最好的解决方案。每个乘客的价格实际上是针对每个选项存储的，从我看到的情况来看，您在select中动态创建和删除选项，而不是显示和隐藏已经存在的选项。此创建和删除操作意味着价格不再作为数据属性存在，因此无法进行价格计算。没有跨浏览器的方式来隐藏选择中的选项。另一个选项是在页面加载时保存数组中每个选择项的每个选项，然后使用保存的选项，而不是创建新选项。应用一个类在不可用的项上执行display:hidden，怎么样。是的，它们仍然可以在Dom中进行选择，但由于我们也在服务器上进行了验证，因此这并不是一个真正的问题。我相信，您的解决方案不会在任何浏览器上都有效。您唯一的选择是删除不希望避免显示的选项。您应该始终在服务器上验证任何场景、任何解决方案；客户端始终可以由用户修改。另外，对于其他场景，正确的显示值是none，而不是hiddenTo。无论谁否决了这个问题，请给出您的理由。据我所知，你没有理由这样做。