Выбор более одного значения из флажка и показ элемента, который отличается для каждого значения из флажка

Question

Итак, у меня есть этот html код флажка с несколькими вариантами выбора.

Если я выберу 1, я хочу показать element1, если я выберу 2, я хочу показать element2, если я выберу 1 и 2 вместе, покажите 1 и 2 вместе.

Я пытаюсь разобраться с этим кодом, но он просто не работает!

$(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>

С уважением

Answer 1

Удерживайте Ctrl в windows, Cmd в ма c для множественного выбора.

Для множественный выбор значение будет в формате Array . Таким образом, вы не можете сопоставить его как одно значение. И установите ID для вашего элемента так же, как параметр . Таким образом, вы можете напрямую получить доступ к элементу без IF Condition . Это называется Оптимизация кода

$("#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() возвращает массив, поэтому вам нужно проверить, находятся ли ваши значения в этом массиве.

Вот решение, близкое к вашему исходному коду. Обратите внимание, что вам также необходимо сначала проверить наличие обоих значений, если вы используете структуру else if.

jquery Метод inArray() возвращает -1, если значение отсутствует в массив.

$(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

Попробуйте .css() вместо .show() и .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>

Подробнее: https://api.jquery.com/css/#css2