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

我想用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>

$total\u booked\u people\u limit=“30”；
成人（18岁以上）：
青少年（14-17岁）：
儿童（7-14岁）：

试试这段代码

<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>

成人（18岁以上）：
青少年（14-17岁）：
儿童（7-14岁）：
$（文档）.ready（函数（）{
$（“.first”）.change（函数（）{
var first=$（“.first”）.val（）；
剩余风险价值=30优先；
$（'.second'）.children（'option'）.remove（）；
对于（firstcount=0；firstcount这是可以的！但是我们必须先选择行，然后选择成人，然后选择青少年，如果我们按照自己的意愿选择，那么它不会像用户希望选择第一个儿童，然后选择成人，然后选择青少年一样，用户可以选择任何一个，它不应该是顺序。您可以通过此链接看到汤姆在右拐角。