根据选择值隐藏和显示列表项 [英] Hiding and showing a list item based on select value

问题描述

我有一个具有不同状态的下拉列表:

I have a drop-down with different states:

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

我想根据所选的下拉值过滤位置列表.这是我尝试过的:

I want to filter my list of locations based on the selected drop-down value. Here is what I have tried:

//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"的列表项，其余的将被隐藏.

So, if I selected Michigan from the drop-down, I would expect only list items with "MI" in their text would be shown and the rest would be hidden.

但是，当我尝试这样做时，该脚本不会隐藏我的任何列表项，并且不会在浏览器控制台中显示任何错误信息.

However, when I try this, the script does not hide any of my list items and does not display any error information in the browser console.

我的脚本不正确吗?还是我没有看到其他问题?

Is my script incorrect or is there another issue I am not seeing?

推荐答案

正如@marks所说，您需要将此代码放入事件侦听器中.但是还有其他问题.

As @marks said, you need to put this code in an event listener. But there are additional problems.

1. 在隐藏所有不匹配的项目之前，您需要显示所有内容.或者，您也可以采用另一种方式:隐藏所有内容，然后显示匹配的项目.

1. Before hiding all the non-matching items, you need to show everything. Or you can do it the other way: hide everything and then show the matching items.

检查值是否不是Search By State的正确方法是:

The proper way to check that the value is not Search By State is:

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

您的代码将计算该值的逻辑逆，该值将始终为false，然后将其与Search By State进行比较.这种比较永远不会是正确的，因此您总是转到else块.

Your code calculates the logical inverse of the value, which will always be false, and then compares that to Search By State. That comparison will never be true, so you always go to the else block.

我建议避免所有负面测试，这会使代码更加混乱.

I recommend avoiding all the negative tests, it makes the code more confusing.

您还可以使用:contains() jQuery选择器来匹配值，而不是在您的代码中循环.

You can also use the :contains() jQuery selector to match the value, instead of looping in your 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();
  }
});

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

这篇关于根据选择值隐藏和显示列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！