现在我希望第二个选择列表仅在对第一个选择列表进行选择/更改时显示。当对第二个进行选择/更改时,我希望显示第三个+第四个选择列表。
这是选择列表的代码:
<div class="row">
<div id="content-a">
<div class='content-row'>
<div class="select_1 col-md-12">
<span>
<select class="form-control" name="table_names" id="slctTable">
</select>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="select_2 col-md-12">
<span>
<select class="form-control" name="column_names" id="slctField">
</select>
</span>
</div>
</div>
<div class="row">
<div class="select_3 col-md-3">
<span>
<select class="form-control" name="comparisonOperators" id="slctOperator">
</select>
</span>
</div>
<div class="select_4 col-md-9">
<span>
<select class="form-control" name="attribute_names" id="slctAttribute">
</select>
</span>
</div>
</div>
最佳答案
你总是可以尝试 jQuery 隐藏/显示元素
像这样有一些东西可以观察你的变化
$(".slctTable").on('change', function(){
$('.select_2').show();
})
或者您可以检查第一个选择中的值是否未定义或为空 首先用 (jQuery) 或 CSS 隐藏其他元素
.select_2 {
display: none;
}
.select_3 {
display: none;
}
然后如果第一个选择器不是未定义的或为 Null 则显示选择器
关于javascript - 在另一个选择列表中进行选择后如何显示/隐藏选择列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37680280/