多个选择下拉依赖于另一个下拉选项值

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>