Select show hide

by Emmanuel Garcia

HTML

<select id="billing_location">
    <option value=""  selected disabled>Select Location</option>
    <option value="1">Pool Bar</option>
    <option value="2">Room Service</option>
</select>
    




<select id="billing_chair_field" class="billing_chair">
            <option>Choose Seat Number</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>

<select id="billing_room_field" class="billing_room">
            <option>Choose Room Number</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>

JavaScript

$(document).ready(function () {
$("#billing_chair_field").show();
     $("#billing_room_field").show();

});



$('#billing_location').on('change', function () {
   var optionSelected = $("option:selected", this);
   var valueSelected = this.value;
   if(valueSelected == 1){
     $("#billing_chair_field").show();
     $("#billing_room_field").hide();
   }
});


$('#billing_location').on('change', function () {
   var optionSelected = $("option:selected", this);
   var valueSelected = this.value;
   if(valueSelected == 2){
     $("#billing_room_field").show();
     $("#billing_chair_field").hide();
   }
});