如何在按下按钮的同时选择两个下拉选项时显示隐藏div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在按下按钮的同时选择两个下拉选项时显示隐藏div相关的知识，希望对你有一定的参考价值。
我希望两个只在用户选择两个下拉值时显示div，然后单击按钮。我想比较按钮点击后我将显示div的基数值。
$(document).ready(function() {
$('select').change(function() {
if (($(this).val() == 'bfcn') && ($(this).siblings('select').val() == 'bfcn')) {
$('.bfcn').show();
} else {
$('.bfcn').hide();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formShow" onsubmit="javascript: return false;">
<select title="Select 1" id="select1">
<option value="">Select an op`enter code here`tion</option>
<option value="1">1</option>
<option value="bfcn">bfcn</option>
</select>
<select title="Select 2" id="select2">
<option value="">Select an option</option>
<option value="3">3</option>
<option value="bfcn">bfcn</option>
</select>
<input type="button" id="button1" value="click" />
<p class="bfcn">BFCN</p>
</form>答案
您的逻辑就位，您只需要更改事件处理程序以侦听#button1上的单击，然后直接选择select元素而不是使用this引用并遍历DOM以查找兄弟。
另请注意，您可以通过向toggle()提供布尔值而不是if条件来简化逻辑。试试这个：
$(document).ready(function() {
$('#button1').click(function(e) {
e.preventDefault();
$('.bfcn').toggle($('#select1').val() == 'bfcn' && $('#select2').val() == 'bfcn');
});
});.bfcn { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formShow">
<select title="Select 1" id="select1">
<option value="">Select an option</option>
<option value="1">1</option>
<option value="bfcn">bfcn</option>
</select>
<select title="Select 2" id="select2">
<option value="">Select an option</option>
<option value="3">3</option>
<option value="bfcn">bfcn</option>
</select>
<input type="button" id="button1" value="click" />
<p class="bfcn">BFCN</p>
</form>以上是关于如何在按下按钮的同时选择两个下拉选项时显示隐藏div的主要内容，如果未能解决你的问题，请参考以下文章
检查表单输入是不是为空，如果不是，则在按下提交按钮时显示隐藏的 div