javascript - jQuery select add update and remove -

xample: considering have 2 hotel rooms can sold 2 options bb or hb, when change option of select 1 (taking 1 room in bb) or change option of select 2 (taking 1 room in hb, selecting again option 1 or option 2 number of rooms still available must result 1

<script> $(document).ready(function() {   $('#rates1').change(function() {     var val = parseint($(this).val());     var optionlength = ($('#rates1 option').length);     var optionremove = optionlength - val - 1;     //alert(optionremove);     $('#rates2 option').remove();   }); }); </script>   <select id="rates1" class="selectclass">     <option value="0">0</option>     <option value="1">1</option>     <option value="2">2</option>     <option value="3">3</option>     <option value="4">4</option>  </select><br /> <select id="rates2" class="selectclass">     <option value="0">0</option>     <option value="1">1</option>     <option value="2">2</option>     <option value="3">3</option>     <option value="4">4</option> </select> 

as per understanding, want show options in select2 based on select1.

if point then, try this

<select id="rates1" class="selectclass">     <option value="0">0</option>     <option value="50">1</option>     <option value="100">2</option> </select> <select id="rates2" class="selectclass">     <option data-rates1="1" value="0">0</option>     <option data-rates1="1"  value="80">1</option>     <option data-rates1="2" value="160">2</option> </select> 

js:

$('#rates1').on('change', function () {     if ((this.value === '0') || (this.value === '50')) {         $('#rates2 option[data-rates1=1]').show();         $('#rates2 option[data-rates1=2]').hide();     }     else {         $('#rates2 option[data-rates1=1]').hide();         $('#rates2 option[data-rates1=2]').show();      } }); 

check out fiddle

you may confused of data-rates, nothing custom data attributes in html5.

hope point.