To show a hidden div with javascript or jquery based on multiple dropdown selected values

Question

I am trying to show a div, which has to be hidden by default, with JavaScript (or Jquery).
The condition to show div is based on the selected options of the two drop-down fields.

In the below code if gender is Female (from one drop-down select) and class is less than 3rd (from other drop-down select) then only the <div id="hidden_div"> should show other wise it should be hidden.
Any help in jquery or javascript would work, thanks!
I have tried the below code which is not working:

<form class="form" method="post" action="doitnow.php" id="form1">
    <label class="col-md-4 control-label">Name of the Student:</label>
    <p class="name">
        <input name="Full_Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" required />
    </p>
    <label>Gender:</label>
    <p class="email">
        <select name="gender" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input" id="name" placeholder="Select your Gender" required>
            <option value="">Select the Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </p>
    <label>Mother's Name</label>
    <p class="email">
        <input name="Mother_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Mother's Name" required />
    </p>

    <p class="email">
        <input name="source" type="text" value="enquiry_form" id="phone" hidden />
    </p>
    <label>Father's Name</label>
    <p class="name">
        <input name="Father_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Father's Name" required />
    </p>
    <label>Class for which admission sought for:</label>
    <p class="email">
        <select name="qualification" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input" id="name" required>
            <option value="">Select the Class</option>
            <option value="LKG">LKG</option>
            <option value="UKG">UKG</option>
            <option value="1st">1st</option>
            <option value="2nd">2nd</option>
            <option value="3rd">3rd</option>
            <option value="4th">4th</option>
            <option value="5th">5th</option>
            <option value="6th">6th</option>
            <option value="7th">7th</option>
            <option value="8th">8th</option>
            <option value="9th">9th</option>
            <option value="10th">10th</option>
            <option value="11th">11th</option>
            <option value="12th">12th</option>
        </select>
    </p>
    <script type="text/javascript">
        function showDiv(select) {
            if (select.value == 'Female' && (select.value == 'LKG' || select.value == 'UKG' || select.value == '1st' || select.value == '2nd' || select.value == '3rd')) {
                document.getElementById('hidden_div').style.display = "block";
            } else {
                document.getElementById('hidden_div').style.display = "none";
            }
        }
    </script>
    <div id="hidden_div" style="display:none;">
        <label>(ONLY FOR GIRL CHILD FOR CLASSES LKG TO III)<br>Select which section admission is required in:</label>
        <p class="email">
            <select name="category" type="text" class="validate[required,custom[email]] feedback-input" id="name">
                <option value="" selected>Select the Section</option>
                <option value="Girls_Section">Girls Section</option>
                <option value="Boys_Section">Boys Section</option>
            </select>
        </p>
    </div>
    <label>Previous school attended:</label>
    <p class="email">
        <input name="prev_school" type="text" class="validate[required,custom[phone]] feedback-input" id="comment" placeholder="Last School Name" required />
    </p>
    <label>Mobile No. (Only 10 digits allowed, format: xxxxxxxxxx):</label>
    <p class="phone">
        <input name="Telephone_Number" type="text" pattern="^\d{3}\d{3}\d{4}$" class="validate[required,custom[phone]] feedback-input" id="Phone" placeholder="Mobile No" required />
    </p>
    <label>Email Address:</label>
    <p class="email">
        <input name="Email_Address" type="text" class="validate[required,custom[phone]] feedback-input" id="email" placeholder="Email Address" /> <!--pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"-->
    </p>
    <?php
      $password = mt_rand(1000, 9999) . "a";
      echo '<input name="pass" type="text" value='.$password.' hidden />';
    ?>

<div class="submit">
    <input type="submit" value="SUBMIT fORM" name="submit" id="button-blue" />
    <div class="ease"></div>
</div>
</form>

Answer 1

You can try this code and put jQuery library in you localhost link it::

<form class="form"  method="post" action="doitnow.php" id="form1">
    <label class="col-md-4 control-label">Name of the Student:</label>
    <p class="name">
        <input name="Full_Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" required/>
    </p>
    <label>Gender:</label>
    <p class="email">
        <select name="gender" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input changer" id="name" placeholder="Select your Gender" required>
            <option value="">Select the Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </p>
    <label>Mother's Name</label>
    <p class="email">
        <input name="Mother_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Mother's Name" required/>
    </p>

    <p class="email">
        <input name="source" type="text" value="enquiry_form" id="phone" hidden />
    </p>
    <label>Father's Name</label>
    <p class="name">
        <input name="Father_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Father's Name" required/>
    </p>
    <label>Class for which admission sought for:</label>
    <p class="email">
        <select name="qualification" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input changer" id="name" required>
            <option value="" >Select the Class</option>
            <option value="LKG">LKG</option>
            <option value="UKG">UKG</option>
            <option value="1st">1st</option>
            <option value="2nd">2nd</option>
            <option value="3rd">3rd</option>
            <option value="4th">4th</option>
            <option value="5th">5th</option>
            <option value="6th">6th</option>
            <option value="7th">7th</option>
            <option value="8th">8th</option>
            <option value="9th">9th</option>
            <option value="10th">10th</option>
            <option value="11th">11th</option>
            <option value="12th">12th</option>
        </select>
    </p>
    <div id="hidden_div" style="display:none;">
        <label>(ONLY FOR GIRL CHILD FOR CLASSES LKG TO III)<br>Select which section admission is required in:</label>
        <p class="email">
            <select name="category" type="text" class="validate[required,custom[email]] feedback-input" id="name">
                <option value="" selected>Select the Section</option>
                <option value="Girls_Section">Girls Section</option>
                <option value="Boys_Section">Boys Section</option>
            </select>
        </p>
    </div>
    <label>Previous school attended:</label>
    <p class="email">
        <input name="prev_school" type="text" class="validate[required,custom[phone]] feedback-input" id="comment" placeholder="Last School Name" required/>
    </p>
    <label>Mobile No. (Only 10 digits allowed, format: xxxxxxxxxx):</label>
    <p class="phone">
        <input name="Telephone_Number" type="text" pattern="^\d{3}\d{3}\d{4}$" class="validate[required,custom[phone]] feedback-input" id="Phone" placeholder="Mobile No" required/>
    </p>
    <label>Email Address:</label>
    <p class="email">
        <input name="Email_Address" type="text" class="validate[required,custom[phone]] feedback-input" id="email" placeholder="Email Address"/> <!--pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"--> 
    </p>
    <?php
    $password = mt_rand(1000, 9999) . "a";
    echo '<input name="pass" type="text" value=' . $password . ' hidden />';

    ?>

    <div class="submit">
        <input type="submit" value="SUBMIT fORM" name="submit" id="button-blue"/>
        <div class="ease"></div>
    </div>
</form>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
            (function ($) {
                $(document).ready(function () {
                    $(document).on('change', '.changer', function () {
                        var class_value = $('select[name="qualification"]').val();
                        var gender_value = $('select[name="gender"]').val();
                        if (gender_value == 'Female' && (class_value == 'LKG' || class_value == 'UKG' || class_value == '1st' || class_value == '2nd' || class_value == '3rd'))
                        {
                            $('#hidden_div').show();
                        } else {
                            $('#hidden_div').hide();
                        }
                    });
                });
            })(jQuery);
</script>

Answer 2

You need to check both selects within your javascript function so do this:

 function showDiv(){
     var select = document.querySelector("select[name='gender']");
     var qselect = document.querySelector("select[name='qualifications']");
     if(select.value == 'Female' && (qselect.value=='LKG'||qselect.value=='UKG'||qselect.value=='1st'||qselect.value=='2nd'||qselect.value=='3rd')){
         document.getElementById('hidden_div').style.display = "block";
     } else{
         document.getElementById('hidden_div').style.display = "none";
     }
} 

Note that you no longer need to pass (this) to this function