下拉列表:如果有任何下拉列表=值，则显示 div

Question

基本上每当选择"bfcn"时，都会显示BFCN 无论下一个值是否等于 BFCN，只要一个等于该值，请继续显示

现在的问题是，每当对任何一个进行选择时，它都会隐藏div。

如果"下拉列表 1 = BFCN" = 显示除法 或 如果 'dropdown2 = BFCN' = 显示 DIV

如果任何下拉列表等于 BFCN，它需要保持 DIV 显示

http://jsfiddle.net/SmokeyLlama/f375e6wv/1/

.HTML

<select title="Select 1" id="select1">
<option value="">Select an option</option>
<option value="1">1</option>
<option value="4">bfcn</option>
</select>
<select title="Select 2" id="select2">
<option value="">Select an option</option>
<option value="3">3</option>
<option value="4">bfcn</option>
</select>
<p class="wireless" style="display: none;">BFCN</p>

脚本

$(document).ready(function(){
$('select').change(function(){
if (($(this).val() == '4')){
$('.wireless').show();
} else {
$('.wireless').hide();
}
});
});

Answer 1

为此，我会保留一个变量，如果任何selectval() == 4，我会更新该变量：

$(document).ready(function(){
$('select').change(function(){
	var show = false;
	$('select').each(function () {
if ($(this).val() == 4){
	show = true;
	    }
});

if (show){
$('.wireless').show();
} else {
$('.wireless').hide();
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select title="Select 1" id="select1">
<option value="">Select an option</option>
<option value="1">1</option>
<option value="4">bfcn</option>
</select>
<select title="Select 2" id="select2">
<option value="">Select an option</option>
<option value="3">3</option>
<option value="4">bfcn</option>
</select>
<p class="wireless" style="display: none;">BFCN</p>

Answer 2

您可以使用filter()返回具有该值的选择的集合，并使用长度为toggle(display)创建布尔值

var $sel = $('select').change(function() {
var hasBcn = $sel.filter(function() {
return $(this).val() === '4';
}).length > 0;
$('.wireless').toggle(hasBcn);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select title="Select 1" id="select1">
<option value="">Select an option</option>
<option value="1">1</option>
<option value="4">bfcn</option>
</select>
<select title="Select 2" id="select2">
<option value="">Select an option</option>
<option value="3">3</option>
<option value="4">bfcn</option>
</select>
<p class="wireless" style="display: none;">BFCN</p>

Answer 3

你可以做下面这样的事情。检查代码以获取评论，如果您有疑问，请告诉我：

//Create references to our DOM elements
const containerEl = document.querySelector('#container');
const wirelessEl = document.querySelector('.wireless');
const selectEls = document.querySelectorAll('select');
//Check if one of the select elements has the required value onchange
const onChange = e => {
const [select1, select2] = Array.from(selectEls);
if (select1.value === '4' || select2.value === '4') {
wirelessEl.style.display = 'inline';
} else {
wirelessEl.style.display = 'none';
}
};
//Use event delegation, so we only have to add 1 event listner on the parent element
containerEl.addEventListener('change', onChange);

<div id="container">
<select title="Select 1" id="select1">
<option value="">Select an option</option>
<option value="1">1</option>
<option value="4">bfcn</option>
</select>
<select title="Select 2" id="select2">
<option value="">Select an option</option>
<option value="3">3</option>
<option value="4">bfcn</option>
</select>
</div>
<p class="wireless" style="display: none;">BFCN</p>