多个选择下拉列表取决于另一个下拉选项值

Question

我希望验证相互依赖3个选择框选项值示例：如果我们选择男子14然后保留16应该显示在青少年和孩子之后我选择6个人在少年然后保持10人应该是显示在子选项然后孩子只能选择10他们不能超过人们限制。见下图

$total_booked_people_limit = "30"; 
<div class="form-group" >
    <label for="sel1"><b>Adults (18+):</b></label>
    <select class="form-control" id="sel1">
        <?php for($i=0;  $i<=$total_booked_people_limit; $i++){                                
            echo "<option value=\"$i\">$i</option>";
        } ?>
    </select>

    <label for="sel1"><b>Teenager(14 - 17):</b></label>
    <select class="form-control" id="sel1">
        <?php for($j=0;  $j<=$total_booked_people_limit; $j++) {                                   
            echo "<option value=\"$j\">$j</option>";
        } ?>
    </select>

    <label for="sel1"><b>Children (7 - 14):</b></label>
    <select class="form-control" id="sel1">
        <?php for($k=0;  $k<=$total_booked_people_limit; $k++) {                                   
            echo "<option value=\"$k\">$k</option>";
        } ?>
    </select>

Answer 1

试试此代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<?php $total_booked_people_limit = "30"; ?>
<div class="form-group" >
    <label for="sel1"><b>Adults (18+):</b></label>
    <select class="form-control first" id="sel1">
        <?php for($i=0;  $i<=$total_booked_people_limit; $i++) {                                
            echo "<option value=\"$i\">$i</option>";
        } ?>
    </select>

    <label for="sel1"><b>Teenager(14 - 17):</b></label>
    <select class="form-control second" id="sel1">
        <?php for($j=0;  $j<=$total_booked_people_limit; $j++) {                                
            echo "<option value=\"$j\">$j</option>";
        } ?>
    </select>

    <label for="sel1"><b>Children (7 - 14):</b></label>
    <select class="form-control third" id="sel1">
        <?php for($k=0;  $k<=$total_booked_people_limit; $k++) {                                
            echo "<option value=\"$k\">$k</option>";
        } ?>
    </select>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".first").change(function() {
                var first = $(".first").val();
                var remaining = 30-first;
                $('.second').children('option').remove();
                for(firstcount = 0; firstcount <= remaining; firstcount++){
                    $(".second").append("<option>"+firstcount+"</option>");
                }
            });

            $(".second").change(function() {
                var first = $(".first").val();
                var second = $(".second").val();
                var firstsecond = +first + +second;
                var remaining = 30-firstsecond;
                $('.third').children('option').remove();
                for(secondcount = 0; secondcount <= remaining; secondcount++){
                    $(".third").append("<option>"+secondcount+"</option>");
                }
            });

        });
    </script>