How To Control Input Type Dropdown Select Options Menu With Jquery

How To Control Input Type Dropdown Select Options Menu With Jquery

I am creating a web site. In this web site , there is a form. I have added 3 dropdown menus in this form like below. Now I want to when someone selects the number 5 from Adults menu , I want to show number 5 in the infants menu. And also I want t keep Adults + Children = 9. Then if this Total is below than 9 , I want to show that extra number in the infants menu. I mean like this ,


Adults + Children = 9
Adults = 5 and infants = 5
But , Adults + Children = 8
Adults = 5 , Children = 3 , it means there is still 1. 
Now I want to show that 1 with infants , 1 + 5 = 6.

Here is the Jquery part.

  1. $(document).ready(function() {

  3.   var adults = parseFloat($('#adults').val());
  4.   var children = parseFloat($('#children').val());
  5.   var infants = $('#infants').val();
  6.   var Total = adults + children;
  7.   //$("#errorModal").html(Total);

  9.   var totalAdultChild = 9;
  10.   $('#adults').change(function() {
  11.     var adultValue = this.value;
  12.     if (this.value > 8) {
  13.       $("#children").prop('disabled', true);

  15.     } else {
  16.       $("#children").prop('disabled', false);

  18.       $('#children option').each(function(index, element) {
  19.         if ((totalAdultChild - adultValue) < this.value)
  20.           $(this).hide();
  21.         else
  22.           $(this).show();
  23.       });

  25.       $('#infants option').each(function(index, element) {
  26.         if (adultValue < this.value)
  27.           $(this).hide();
  28.         else
  29.           $(this).show();
  30.       });

  32.     }
  33.   });


  36.   //alert(Total);

  38. });

Here is HTML Dropdown View.

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

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

  19.   <div class="col-md-4 col-sm-12 hero-feature">
  20.     <!-- Start Of The Col Class -->
  21.     Children :
  22.     <select name="children" class="form-control" id="children">
  23.       <option value="1">1</option>
  24.       <option value="2">2</option>
  25.       <option value="3">3</option>
  26.       <option value="4">4</option>
  27.       <option value="5">5</option>
  28.       <option value="6">6</option>
  29.       <option value="7">7</option>
  30.       <option value="8">8</option>
  31.       <option value="9">9</option>
  32.     </select> <br>

  34.   </div>

  36. <div class="col-md-4 col-sm-12 hero-feature">
  37. <!-- Start Of The Col Class -->
  38. Children :
  39. <select name="infants" class="form-control" id="infants">
  40.   <option value="1">1</option>
  41.   <option value="2">2</option>
  42.   <option value="3">3</option>
  43.   <option value="4">4</option>
  44.   <option value="5">5</option>
  45.   <option value="6">6</option>
  46.   <option value="7">7</option>
  47.   <option value="8">8</option>
  48.   <option value="9">9</option>
  49. </select> <br>

  51.   </div>

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

  55. </form>