javascript - 根据选择值隐藏和显示列表项

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();