[英]Show/hide dropdown based on another dropdown selection
When a user selects "Yes" for Menu1, I am trying to make Menu2 appear.当用户为 Menu1 选择“是”时,我试图让 Menu2 出现。 When "Yes" is selected for Menu3, Menu4 should appear, etc. What am I missing or doing wrong?
当为 Menu3 选择“是”时,应该出现 Menu4,等等。我错过了什么或做错了什么? Thank you in advance!
先感谢您!
$(function() { $("#Menu2").hide(); $("#Menu3").hide(); $("#Menu4").hide(); $("#Menu5").hide(); $("#Menu6").hide(); $("#Menu1").change(function() { if ($(this).val() == "Yes") { $("#Menu2").show(); } else { $("#Menu2").hide(); } }); $("#Menu2").change(function() { if ($(this).val() == "Yes") { $("#Menu3").show(); } else { $("#Menu3").hide(); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-row"> <div class="form-group col-md-4"> <label for="Menu1">Menu1</label> <select class="form-control" name="name" id="Menu1"> <option value="">--Please choose an option--</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </div> <div class="form-group col-md-4" id="Menu2"> <label for="Menu2">Menu2</label> <select class="form-control" name="pets" id="Menu2"> <option value="">--Please choose an option--</option> <option value="dog">Yes</option> <option value="cat">No</option> </select> </div> <div class="form-group col-md-4" id="Menu2"> <label for="Menu2">Menu2</label> <select class="form-control" name="pets" id="Menu2"> <option value="">--Please choose an option--</option> <option value="dog">Yes</option> <option value="cat">No</option> </select> </div>
The problem was in the naming and also in the structure of your jQuery问题出在命名和 jQuery 的结构中
$(document).ready(function(){ $("#menu2").hide(); $("#menu3").hide(); }); $(document).on('change',"#select1", function () { if ($(this).val() == "Yes") { $("#menu2").show(); } else { $("#menu2").hide(); } }); $(document).on('change',"#select2", function () { if ($(this).val() == "Yes") { $("#menu3").show(); } else { $("#menu3").hide(); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group col-md-4"> <label for="Menu1">Menu1</label> <select class="form-control" name="name1" id="select1"> <option value="">--Please choose an option--</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </div> <div class="form-group col-md-4" id="menu2"> <label for="Menu2">Menu2</label> <select class="form-control" name="name2" id="select2"> <option value="">--Please choose an option--</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </div> <div class="form-group col-md-4" id="menu3"> <label for="Menu2">Menu3</label> <select class="form-control" name="name3" id="select3"> <option value="">--Please choose an option--</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> </div> </div>
Your html and javascript both are wrong.你的 html 和 javascript 都是错误的。 you can not give same id for multiple controls.
您不能为多个控件提供相同的 ID。 Here is an example
这是一个例子
<div class="form-row">
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name" id="Menu1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="divMenu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="divMenu3">
<label for="Menu2">Menu3</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
$("#divMenu2").hide();
$("#divMenu3").hide();
$("#Menu1").change(function() {
if ($(this).val() == "Yes") {
$("#divMenu2").show();
} else {
$("#divMenu2").hide();
}
});
$("#Menu2").change(function() {
if ($(this).val() == "Yes") {
$("#divMenu3").show();
} else {
$("#divMenu3").hide();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.