Скрытие и отображение элемента списка на основе значения выбора

Question

У меня есть раскрывающийся список с различными состояниями:

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

Я хочу отфильтровать список мест на основе выбранное значение раскрывающегося списка. Вот что я попробовал:

//Script to filter ul by dropdown
    <script>
        if (!$("#dropdown").val() === "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().contains($("#dropdown").val()))
                {
                    $(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();
            });
        }
    </script>

Итак, если бы я выбрал Мичиган из выпадающего списка, я бы ожидал, что будут показаны только элементы списка с «MI» в их тексте, а остальные будут скрыты. .

Однако, когда я пытаюсь это сделать, сценарий не скрывает ни один из элементов моего списка и не отображает информацию об ошибке в консоли браузера.

Мой сценарий неверен или существует другой вопрос я не вижу?

Answer 1

Вам необходимо прослушать изменения в раскрывающемся списке, а затем - всякий раз, когда происходит изменение, - применить ваш код.

Я больше не использую jQuery, и вы не должны ни один, но если имена функций верны, похоже, что написанное вами должно работать. Поэтому попробуйте обернуть его в слушателе:

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

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

updateList();

Answer 2

Как сказал @marks, вам нужно поместить этот код в прослушиватель событий. Но есть и дополнительные проблемы.

1. Прежде чем скрывать все несоответствующие элементы, вам нужно показать все. Или вы можете сделать это другим способом: спрятать все и затем показать соответствующие элементы.

2. Правильный способ проверить, что значение не Search By State:

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

Ваш код вычисляет логическую инверсию значения, которое всегда будет false, а затем сравнивает его с Search By State. Это сравнение никогда не будет верным, поэтому вы всегда go к блоку else.

Я рекомендую избегать всех отрицательных тестов, это делает код более запутанным.

Вы также можете используйте селектор :contains() jQuery для сопоставления со значением вместо циклического перебора в вашем коде.

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

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

Answer 3

Несколько мелких вещей с вашим кодом, но вы очень близки:

1. Вам необходим прослушиватель события change , который запускает ваш код при изменении пользователя выпадающий список

2. Ваше условие if немного отклонено, просто используйте !== вместо отрицания !$("#dropdown").val() === "Search By State"

3. jQuery содержит будет искать элементы DOM, поэтому, вероятно, это не то, что вам нужно, используйте , включая , вместо этого для поиска в тексте () li

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

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