[英]Use JQuery to hide and show a div based on drop down selection
我试图隐藏一个下拉框并显示一组特定的div(其类和id相同)。
下拉列表的值对应于div的名称
我的尝试:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$("#submissionType").change(function () {
var submission = $(this).val();
if ($(this).val()) {
$("#"+submission).show();
} else {
$("#"+submission).hide();
}
});
});
</script>
HTML:
<select id="submissionType">
<option>Choose Submission Type</option>
<option value="member-submission">member-submission</option>
<option value="researcher-submission">researcher-submission</option>
<option value="student-submission">student-submission</option>
<option value="paper-submission">paper-submission</option>
</select>
<div class ="new-member-background">
<div class ="member-submission" id="member-submission">
<form action="SubmitData.php" method="post">
<input type="text" name="first" placeholder="First Name" />
<br/>
<input type="text" name="last" placeholder="Last Name" />
<br/>
<input type="text" name="title" placeholder="Title" />
<br/>
<input type="text" name="institution" placeholder="Institution" />
<br/>
<input type="number" name="dept_code" placeholder="Department Code" />
<br/>
<input type="text" name="division" placeholder="Division" />
<br />
<input type="text" name="email" placeholder="Email" />
<br/>
<input type="text" name="website" placeholder="Website" />
<br/>
<button type="submit" name="submit">Sign Up</button>
</form>
</div>
/**...Other divs...*/
</div>
您应该全部隐藏它们,然后显示所选的一个。 例如:
$(function () { //hide them all to begin with. It would be easier if they all shared a classname. You could also do this in CSS) $("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide(); //on change $("#submissionType").change(function () { var submission = $(this).val(); //hide them all: $("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide(); //show the selected one $("#"+submission).show(); }); });
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <select id="submissionType"> <option>Choose Submission Type</option> <option value="member-submission">member-submission</option> <option value="researcher-submission">researcher-submission</option> <option value="student-submission">student-submission</option> <option value="paper-submission">paper-submission</option> </select> <div class ="new-member-background"> <div class ="member-submission" id="member-submission"> <form action="SubmitData.php" method="post"> <input type="text" name="first" placeholder="First Name" /> <br/> <input type="text" name="last" placeholder="Last Name" /> <br/> <input type="text" name="title" placeholder="Title" /> <br/> <input type="text" name="institution" placeholder="Institution" /> <br/> <input type="number" name="dept_code" placeholder="Department Code" /> <br/> <input type="text" name="division" placeholder="Division" /> <br /> <input type="text" name="email" placeholder="Email" /> <br/> <input type="text" name="website" placeholder="Website" /> <br/> <button type="submit" name="submit">Sign Up</button> </form> </div> /**...Other divs...*/ </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.