JSFiddle - React, Tailwind, and code Playground

by Dipesh Paudel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="xyz" id="vadults" name="vadults">
       <option value="0" disabled selected> Number of Adults</option>
       <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>
</select>
<select class="xyz" id="vchilds" name="vchilds">
        <option value="0" disabled selected>Number of Childs</option>
        <option value="0">No</option>
        <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>
</select>
<select class="xyz" id="vbeds" name="vbeds">
         <option value="0" disabled selected>Type of Bed</option>
         <option value="1">Single</option>
         <option value="2">Double</option>
</select>
<select class="" id="vrooms" name="vrooms">
      <option value="0" disabled selected>Required number of Rooms</option>
      <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>
</select>

CSS

select option[disabled] {
                display: none;
            }

JavaScript

$(document).ready(function () {
$('.xyz').change(function () {
                    var adults = $("#vadults option:selected").val();
                    var childs = $("#vchilds option:selected").val();
                    var beds = $("#vbeds option:selected").val();
                    var rooms = $("#vrooms option:selected").val();
                    if (beds == 1) {
                        if (adults == 1) {
                            $("#vrooms option[value='1']").removeAttr('disabled');
                            $("#vrooms option[value='2']").removeAttr('disabled');
                            $("#vrooms option[value='3']").removeAttr('disabled');
                            if (childs == 1) {
                                $("#vrooms option[value='1']").removeAttr('disabled');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 3 || childs == 2) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('selected', 'selected');
                                $("#vrooms option[value='2']").removeAttr('disabled');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 4 || childs == 5) {
                                $("#vrooms option[value='1']").attr('disabled', 'disabled');
                                $("#vrooms option[value='2']").attr('disabled', 'disabled');
                                $("#vrooms option[value='3']").attr('selected', 'selected');
                                $("#vrooms option[value='3']").removeAttr('disabled');
                            }
                            if (childs == 6) {
                               ...