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”的列表项，其余的将被隐藏。

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

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

标签： javascriptjqueryhtml

Answer 1

您需要侦听下拉列表中的更改，然后 - 每当发生更改时 - 应用您的代码。

我不再使用 jQuery，你也不应该使用，但如果函数名称正确，看起来你写的应该可以工作。所以尝试将它包装在一个监听器中：

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

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

updateList();