0
我想顯示一個div，必須用JavaScript（或Jquery）默認隱藏。
顯示div的條件基於兩個下拉字段的選定選項。
在下面的代碼，如果性別是女（從一個下拉菜單中選擇）和類是小於第三（從其他下拉菜單中選擇），那麼只有<div id="hidden_div">應該顯示其他明智它應該隱藏起來。
在jQuery或JavaScript的任何幫助將工作，謝謝！
我曾嘗試下面的代碼是不工作：要顯示一個基於多個下拉選定值的javascript或jquery的隱藏div
<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>
謝謝拉娜！有用。 – Kitty
@Kitty如果它幫助你和他人，請UPVOTE答案。 :) –