J'ai donc ce code html d'une case à cocher avec plusieurs sélections.

Si je sélectionne 1, je veux montrer l'élément1, Si je sélectionne 2, je veux montrer l'élément2, Si je sélectionne 1 et 2 ensemble, montre 1 et 2 ensemble.

J'essaie de le comprendre avec ce code, mais cela ne fonctionne tout simplement pas!

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

Sincères amitiés

0
Majd Watfah 7 avril 2020 à 10:25

3 réponses

Meilleure réponse

$('#nearbyy').val() renvoie un tableau, vous devez donc vérifier si vos valeurs se trouvent dans ce tableau.

Voici une solution proche de votre code d'origine. Notez que vous devez également vérifier l'occurrence des deux valeurs au début si vous utilisez une structure else if.

La méthode inArray() de jquery renvoie -1 si la valeur n'est pas dans le tableau.

$(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>
1
jo3rn 7 avril 2020 à 07:48

Maintenez Ctrl dans les fenêtres, Cmd dans mac pour la sélection multiple.

Pour Sélection multiple , la valeur sera au format Tableau . Vous ne pouvez donc pas le faire correspondre comme une seule valeur. Et définissez ID sur votre élément de la même manière que l'option . Vous pouvez donc accéder directement à l'élément sans condition IF . Cela s'appelle Optimisation du code

$("#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>
0
BadPiggie 7 avril 2020 à 07:51

Essayez .css() au lieu de .show() et .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>

En savoir plus: https://api.jquery.com/css/#css2

-1
Robin 7 avril 2020 à 07:38