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

Question

我正在创建一个网站。在这个网站上，我创建了一个表单。所以，有 2 个下拉菜单，如下所示。

我想将成人和 child 的人数限制为 9 人。可以选择 4 名成人和 0 到 5 名 child ，或者 6 名成人和 0-3 名 child ，但总数不能超过 9。

到目前为止，我尝试过的代码仅适用于 Adults ，不适用于 Total ( Adults + Children )。但是，并不是必须为子菜单选择一个值。如果用户愿意，他可以将其保留为 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 下拉 View 。

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

Answer 1

以下代码片段可能对您有所帮助。

   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();
               }
            });
        }
    });