Search code examples
javascriptjqueryhtmlshow

Dropdowns: IF ANY dropdown=value, show div


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();
      }
   });
 });

Solution

  • 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>