javascript - 根据另一个下拉选择显示/隐藏下拉列表
问题描述
当用户为 Menu1 选择“是”时,我试图让 Menu2 出现。当为 Menu3 选择“是”时,应出现 Menu4 等。我错过了什么或做错了什么?先感谢您!
$(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>
解决方案
问题在于命名以及 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>
推荐阅读
- java - 为什么数组赋值不兼容,即使它们的数据类型是不兼容的?
- java - 在 Android 上使用 OData
- typo3 - TYPO3 Flexform 配置
- php - 如何使用 if 语句更改 Laravel 中的输入类型值
- linux - 在 Ubuntu 下启动/停止 .NET Core 应用程序
- cassandra - Cassandra UDT 在列表集合中搜索
- angular - 离子 3 的 ngx-translate 无法正常工作
- excel - 为什么我无法使用 Excel VBA 向组合框列表中添加行?
- javascript - 如何在输入文本上显示 NFC 扫描结果
- ios - numberOfRowsInSection 重复计算最后一个部分