Masquer et afficher un élément de liste en fonction de la valeur sélectionnée

Vous devez écouter les changements dans la liste déroulante et ensuite - chaque fois qu'un changement se produit - appliquer votre code.

Je n'utilise plus vraiment jQuery et vous ne devriez pas non plus, mais si les noms des fonctions sont corrects, il ressemble à ce que vous avez écrit devrait fonctionner. Alors essayez de l'envelopper dans un auditeur:

$(document).ready(() => $("#dropdown").on( 'change', updateList ) );

function updateList() {
  // put your code here
}

updateList();

Quelques petites choses avec votre code, mais vous êtes très proche:

1. Vous avez besoin d'un écouteur d'événement de changement qui déclenche votre code lorsque l'utilisateur modifie le liste déroulante

2. Votre condition si est un peu décalée, utilisez simplement ! == au lieu de nier ! $ ("# dropdown"). val ( ) === "Recherche par état"

3. contient de jQuery recherchera les éléments DOM, donc ce n'est probablement pas ce que vous voulez , utilisez inclut à la place pour rechercher le texte () du li

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dropdown" id="dropdown">
  <option value="Search By State">Search By State</option>
  <option value="AL">Alabama</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="NE">Nebraska</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="PA">Pennsylvania</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="VA">Virginia</option>
  <option value="WI">Wisconsin</option>
</select>

<ul class="locations">
  <li>Address 1, NY</li>
  <li>Address 2, MI</li>
  <li>Address 3, WI</li>
  <li>Address 4, TN</li>
  <!--more addresses listed below-->
</ul>

$("#dropdown").change(function() {
  let selectedValue = this.value;
  if (selectedValue !== "Search By State") { //the selection is a state

    $(".locations li").each(function() {
      //this now refers to each li
      //do stuff to each
      //hide any that aren't the state selected
      if (!$(this).text().includes(selectedValue)) {
        $(this).hide();
      }
    });
  } else {
    $(".locations li").each(function() {
      //this now refers to each li
      //do stuff to each
      //hide any that aren't the state selected
      $(this).show();
    });
  }
});

Comme @marks l'a dit, vous devez mettre ce code dans un écouteur d'événements. Mais il y a des problèmes supplémentaires.

1. Avant de masquer tous les éléments qui ne correspondent pas, vous devez tout afficher. Ou vous pouvez le faire de l'autre façon: tout cacher, puis afficher les éléments correspondants.

2. La bonne façon de vérifier que la valeur n'est pas Recherche par état est:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dropdown" id="dropdown">
  <option value="Search By State">Search By State</option>
  <option value="AL">Alabama</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="NE">Nebraska</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="PA">Pennsylvania</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="VA">Virginia</option>
  <option value="WI">Wisconsin</option>
</select>

<ul class="locations">
  <li>Address 1, NY</li>
  <li>Address 2, MI</li>
  <li>Address 3, WI</li>
  <li>Address 4, TN</li>
  <!--more addresses listed below-->
</ul>

Votre code calcule l'inverse logique de la valeur, qui sera toujours false , puis le compare à Search By State . Cette comparaison ne sera jamais vraie, donc vous allez toujours dans le bloc else .

Je recommande d'éviter tous les tests négatifs, cela rend le code plus confus.

Vous pouvez également utiliser le sélecteur jQuery : contains () pour faire correspondre la valeur, au lieu de boucler votre code.

$("#dropdown").change(function() {
  if ($(this).val() === "Search By State") {
    $(".locations li").show();
  } else {
    var selection = $(this).val();
    console.log("Showing " + selection);
    $(".locations li").hide();
    $(`.locations li:contains(${selection})`).show();
  }
});

if (("#dropdown").val() !== "Search By State")