根据选择下拉列表显示或隐藏多个字段-jQuery [英] Displaying or hiding multiple fields based on selection dropdown - jquery
问题描述
我有一个包含下拉菜单的表格.根据下拉菜单中的选择,应显示或隐藏多个字段. 我编写的jquery函数仅适用于一个字段.如果我在下拉菜单中仅选择否",则其余部分将保持隐藏. 我不太明白为什么. 我可以通过为每个字段id赋予另一个名称(例如showing1,showing2,...)并在函数中引用此id来解决此问题,但这需要重复很多.
I have a form containing a dropdown. Depending on the selection made in the dropdown, multiple fields should appear or hide. The jquery function, I have written, works only for one fields. If I select no in the dropdown only the title what is hidden the rest stays. I don't quite understand why. I could solve this by giving each field id another name (for example showing1, showing2, ...) and refer to this id in the function but that is a lot of repetition.
没有更好的方法吗?
链接到小提琴.
感谢您的输入.
## jQuery
$(document).ready(function(){
$('#showing').hide();
$('#condition').change(
function(){
if(this.value == "yes"){
$('#showing').show();
}
else {
$('#showing').hide();
}
}
)
});
### Part of the form
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<select name="playing" class="form-control" id="condition" required>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="p-2" for="what" id="showing" >What</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<input id="showing"
type="text"
class="form-control input-text"
name="wat"
>
</div>
</div>
</div>
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="p-2" for="type" id="showing" >Type</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
推荐答案
首先,您应该从元素中删除ID正在显示",并添加一个类名正在显示",或者可以将此类添加到所有这些元素的父元素中.其次,您应该将ID更改为jquery中的class.而且我认为您没有添加加载jquery的脚本.
first, you should remove id "showing" from elements and add a class name "showing" or you can add this class to the parent element of all these elements. second, you should change your id to class in jquery. and I think you didn't add the script that loads jquery.
修改后的代码:
$(document).ready(function(){
$('.showing').hide();
$('#condition').change(
function(){
if(this.value == "yes"){
$('.showing').show();
}
else {
$('.showing').hide();
}
}
)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<select name="playing" class="form-control" id="condition" required>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="p-2 showing" for="what">What</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<input
type="text"
class="form-control input-text showing"
name="wat"
>
</div>
</div>
</div>
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="p-2 showing" for="type">Type</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<input
type="text"
class="form-control input-text showing"
name="type"
>
</div>
</div>
</div>
</div>
这篇关于根据选择下拉列表显示或隐藏多个字段-jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!