javascript - 根据多个下拉选择值使用 javascript 或 jquery 显示隐藏的 div

Question

我正在尝试使用 JavaScript(或 Jquery)显示默认情况下必须隐藏的 div。
显示 div 的条件基于两个下拉字段的选定选项。

在下面的代码中，如果 gender 是 Female(从一个下拉列表中选择)并且 class 小于 3rd (从其他下拉选择)然后只有<div id="hidden_div">应该以其他方式显示它应该被隐藏。
jquery 或 javascript 中的任何帮助都可以，谢谢!
我尝试了以下无效的代码:

<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

你可以尝试这段代码并将 jQuery 库放在你的本地主机上链接它::

<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>