Basically whenever 'bfcn' is selected show BFCN Regardless if next value doesnt equal BFCN, as long as one equals the value, continue to show the
This issue right now is whenever selection is made on either, it will hide the div.
if 'dropdown1 = bfcn' = SHOW DIV OR if 'dropdown2 = bfcn' = SHOW DIV
It need to keep the DIV show if ANY of the dropdowns equal BFCN
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>
Script
$(document).ready(function(){
$('select').change(function(){
if (($(this).val() == '4')){
$('.wireless').show();
} else {
$('.wireless').hide();
}
});
});
For this I'd keep a variable which I'd update if any select
has val() == 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>