Javascript 根据以前的选择更新下拉菜单

我正在创建一个电影RubyonRails应用程序，目前正在进行预订工作

用户可以选择成人座椅、儿童座椅、学生座椅和高级座椅的数量。屏幕上有许多座位存储在座位表中，但用户并没有预定特定的座位，而是预定了一定数量的座位。下拉菜单允许用户为每个数量的成人、儿童、学生、老年人选择最多10个座位，但如果屏幕上有50个座位，其中45个座位已预订，则下拉菜单最多只能选择5个座位。但我的问题是，这个最大值在每个下拉列表中，因此用户可以选择5个成人座椅、儿童座椅、学生座椅和高级座椅

我知道我可以添加验证，这样，如果一个屏幕有50个座位，但45个已经预订，并且用户选择了5个成人、5个儿童、5个学生和5个高级座位，那么它将添加数量和现有预订量5+5+5+5+总现有预订量=65，以确保这不超过屏幕的容量。但我想做的是使下拉菜单根据之前的选择进行更新。因此，如果总共还有5个座位要预订，而用户选择了3个成人座位，那么儿童、学生和高级下拉列表最多只能有2个

有人能帮我做这个吗。我看过很多动态下拉列表的链接，但没有一个是这样的，因为它们关注的是国家和州

视图/预订/_form.html.erb：

<td>
    <%= f.select :adult_seats, '0'..(@booking.showing.screen.remaining_seats > 10 ? 10 : @booking.showing.screen.remaining_seats).to_s %><br>
</td>
<td>
    <%= f.select :child_seats, '0'..(@booking.showing.screen.remaining_seats > 10 ? 10 : @booking.showing.screen.remaining_seats).to_s %><br>
</td>
<td>
    <%= f.select :senior_seats, '0'..(@booking.showing.screen.remaining_seats > 10 ? 10 : @booking.showing.screen.remaining_seats).to_s %><br>
</td>
<td>
    <%= f.select :student_seats, '0'..(@booking.showing.screen.remaining_seats > 10 ? 10 : @booking.showing.screen.remaining_seats).to_s %><br>
</td>

以下是一个例子：

我建议返回输入字段中可用的总数，而不是所取的数字

<input type="hidden" value="8" name="seats_available" id="seats_available">
<select id="adult" name="adult">
    <option val="0">0</option>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
    <option val="4">4</option>
    <option val="5">5</option>
</select>
<br><br><br>
<select id="child" name="child">
    <option val="0">0</option>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
    <option val="4">4</option>
    <option val="5">5</option>
</select>

Javascript:

$(document).ready(function () {
    var seats_available = parseInt($('#seats_available').val());
    var max_allowed = 5;

    $('select').on('change', function () {
        var currently_selected = 0;
        $('select').each(function() {
            currently_selected += parseInt($(this).val());            
        })
        $('select').each(function () {
            var nowAvailable = seats_available - currently_selected;
            var currentlySelectedValue = parseInt($(this).val());           
            $(this).find('option').each(function () {
                $option = $(this)           
                num = parseInt($option.val());
                if (num <= currentlySelectedValue)
                    $option.prop('disabled', false);
                else if (nowAvailable >= 5)
                    $option.prop('disabled', false);
                else
                    $option.prop('disabled', num - currentlySelectedValue >= nowAvailable);               
            })
        });
    })    

})

---

您需要有一个客户端的总剩余空间，然后根据选择限制后续下拉列表。理想情况下，这会打电话给服务器，检查它们是否仍然可用，或者锁定其他人的预订。好的，那么我该怎么做呢？没有必要为其他人锁定预订表单，因为系统一次只能由一个人访问。我正在为你制作一个样本。谢谢，你有什么工作吗？哈，我花了一个小时做这个逻辑，杜德消失了。谢谢，您已经提供了HTML，但是如何使用我当前使用的Rails f.select？您必须查看Rails呈现的HTML，然后编写javascript。。。。我的朋友，rails在这里帮不了你。只需看看它输出的html并为其编写javascript，但这个答案非常接近让它工作所需的javascript代码。只需将其复制并粘贴到页面上的jquery下方，并根据需要调整元素选择器。我只是不确定HTML将如何工作以及如何隐藏输入类型。我无法向您完整介绍如何操作：在隐藏字段中呈现剩余的座位数，在jquery之后，将javascript复制并粘贴到页面中，然后使用它。

<input type="hidden" value="8" name="seats_available" id="seats_available">
<select id="adult" name="adult">
    <option val="0">0</option>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
    <option val="4">4</option>
    <option val="5">5</option>
</select>
<br><br><br>
<select id="child" name="child">
    <option val="0">0</option>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
    <option val="4">4</option>
    <option val="5">5</option>
</select>

$(document).ready(function () {
    var seats_available = parseInt($('#seats_available').val());
    var max_allowed = 5;

    $('select').on('change', function () {
        var currently_selected = 0;
        $('select').each(function() {
            currently_selected += parseInt($(this).val());            
        })
        $('select').each(function () {
            var nowAvailable = seats_available - currently_selected;
            var currentlySelectedValue = parseInt($(this).val());           
            $(this).find('option').each(function () {
                $option = $(this)           
                num = parseInt($option.val());
                if (num <= currentlySelectedValue)
                    $option.prop('disabled', false);
                else if (nowAvailable >= 5)
                    $option.prop('disabled', false);
                else
                    $option.prop('disabled', num - currentlySelectedValue >= nowAvailable);               
            })
        });
    })    

})