Javascript 如何使用Jquery控制输入类型下拉菜单

我正在创建一个网站。在这个网站上，我创建了一个表单。下面有两个下拉菜单

我想把成人和儿童的数量限制在9人以内。可以选择4名成人和0-5名儿童，或6名成人和0-3名儿童，但总数不得超过9名

到目前为止，我尝试的代码只适用于成年人，而不适用于所有成年人+儿童。但是，不必为“子菜单”选择值。如果用户需要，他可以将其保留为0

我该怎么做

以下是我试用过的Jquery部分：

<script type="text/javascript">
   $(document).ready(function () {

      var adults = parseFloat($('#adults').val());
      var children = parseFloat($('#children').val());
      var infants = $('#infants').val();
      var Total = adults + children;

      $('#adults').change(function() {
          if (this.value > 8) {// check against the value of the adults drop down
              $("#children").prop('disabled', true);
          } else {
              $("#children").prop('disabled', false);  // probably need to re-enable it
          }
      });
  });
</script>

下面是HTML下拉视图

<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">

  <div class="col-md-4 col-sm-12 hero-feature">
    <!-- Start Of The Col Class -->
    Adults :
    <select name="adults" class="form-control" id="adults">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
    </select> <br>
  </div>

  <div class="col-md-4 col-sm-12 hero-feature">
    <!-- Start Of The Col Class -->
    Children :
    <select name="children" class="form-control" id="children">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
    </select> <br>

  </div>

  <a href="#" id="ghsubmitbtn" class="btn btn-success">Search Flight Data</a>

</form>

---

下面的代码片段可能会对您有所帮助

   var totalAdultChild = 9;
   $('#adults').change(function() {
       var adultValue = this.value;
       if (this.value > 8) {                     
           $("#children").prop('disabled', true);
       } else {
           $("#children").prop('disabled', false);  
           $('#children option').each(function(index,element){
               if((totalAdultChild-adultValue)<this.value){
                   $(this).hide();
               } else {
                   $(this).show();
               }
            });
        }
    });

---

当我尝试这个，当我选择5，它给孩子4。但是，这不是强制性的。如果用户只需要，他可以从子菜单中选择。我该怎么做？它成功了！！谢谢你！！：我再次需要你的帮助-