从一个复选框中选择多个值并显示一个元素，该元素对于复选框中的每个值都不同

Question

So I have this html code of a check box with multiple selections.

If I select 1, I want to show element1, If I select 2, I want to show element2, If I select 1 and 2 together, show 1 and 2 together.

I'm trying to figure it out with this code, but it's just not working!

 $(document).ready(function() { $('#nearbyy').bind('change', function(e) { if ($('#nearbyy').val() == '1') { $("#Airport").show(); $("#Garden").hide(); } else if ($('#nearbyy').val() == '2') { $("#Airport").hide(); $("#Garden").show(); } else if ($('#nearbyy').val() == '1' || $('#nearbyy').val() == '2') { $("#Airport").show(); $("#Garden").show(); } else { $("#Airport").hide(); $("#Garden").hide(); } }).trigger('change'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>List of Stores which completed the survey so far</label> <select multiple="" for="postage" id="nearbyy" class="form-control"> <option value="">Select...</option> <option value="1" id ="1">Airport</option> <option value="2" id ="2">Garden</option> </select> <br /> <div id="Airport" class="form-control"> Element1 </div> <br /> <div id="Garden" class="form-control"> Element2 <br /> <br /> </div>

Kind regards

Answer 1

Hold Ctrl in windows, Cmd in mac for multi-select.

For Multi Select the value will be in a Array format. So you can't match it as a single value. And set the ID to your element same as the option . So you can directly access the element without IF Condition . This is called Code Optimisation

 $("#nearbyy").change(function(e){ const value = $(e.target).val(); // value list $('.element').hide(); // hide all elements first // loop through array value.forEach(x => { try { $('#'+x).show(); // show only selected elements } catch(ex) { //not select anything or element not found } }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>List of Stores which completed the survey so far</label> <select multiple="" for="postage" id="nearbyy" class="form-control"> <option value="">Select...</option> <option value="1">Airport</option> <option value="2">Garden</option> </select> <br /> <div id="1" class="form-control element" style='display:none'> Element1 </div> <br /> <div id="2" class="form-control element" style='display:none'> Element2 <br /> <br /> </div>

Answer 2

$('#nearbyy').val() returns an array, so you need to check if your values are in that array.

Here is a solution close to your original code. Notice, that you also need to check for occurence of both values at first if you use an else if structure.

jquery's inArray() method returns -1 if the value is not in the array.

 $(document).ready(function() { $('#nearbyy').bind('change', function(e) { const values = $('#nearbyy').val(); if (jQuery.inArray("1", values) > -1 && jQuery.inArray("2", values) > -1) { $("#Airport").show(); $("#Garden").show(); } else if (jQuery.inArray("1", values) > -1) { $("#Airport").show(); $("#Garden").hide(); } else if (jQuery.inArray("2", values) > -1) { $("#Airport").hide(); $("#Garden").show(); } else { $("#Airport").hide(); $("#Garden").hide(); } }).trigger('change'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>List of Stores which completed the survey so far</label> <select multiple for="postage" id="nearbyy" class="form-control"> <option value="">Select...</option> <option value="1" id ="1">Airport</option> <option value="2" id ="2">Garden</option> </select> <br /> <div id="Airport" class="form-control"> Element1 </div> <br /> <div id="Garden" class="form-control"> Element2 <br /> <br /> </div>

Answer 3

Try .css() instead of .show() and .hide()

<script>
$(document).ready(function() {
  $('#nearbyy').bind('change', function(e) {
    if ($('#nearbyy').val() == '1') {
      $("#Airport").css("display", "unset");
      $("#Garden").css("display", "none");
    } else if ($('#nearbyy').val() == '2') {
      $("#Airport").css("display", "none");
      $("#Garden").css("display", "unset");
    } else if ($('#nearbyy').val() == '1' .val() == '2') {
      $("#Airport").css("display", "unset");
      $("#Garden").css("display", "unset");
    } else {
      $("#Airport").css("display", "none");
      $("#Garden").css("display", "none");
    }
  }).trigger('change');
});
</script>

Read more: https://api.jquery.com/css/#css2