Question

我有一个要开始使用的选择框，我想根据从选择框选择的选项来筛选我拥有的列表。不知道这是否相关，但是我的userList列表中有大约2,000个联系人，因此由于PII，我删除了很多数据，并用更简单的描述替换了它。列表过滤器可以在输入框中键入内容，但是即使我输入了工作脚本，代码中也没有任何响应。

选择框不会像输入文本一样过滤数据。我遵循了URL here和here，空手而归。第二个链接有效，但是我正在寻找jQuery解决方案，而不是JS解决方案。

当我尝试一个有效的JQuery脚本时，什么都没发生，我发现这可能是我的代码或者我键入了错误的代码，但是即使是功能代码，我仍然没有任何反应。然后，我删除了功能代码，并插入了一个断点“ alert（）”，然后弹出警报！我现在挠头，只是放弃了一天。我不知道为什么功能代码无法执行。

我尝试过的内容已在代码中注释掉。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Autofill Assignee Search Tool</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>     </head>
<body>
    <div id="assignees">
        <input type="text" class="search" id="filter" placeholder="Search" />                 
        <select class="filterteams" name="teams">
            <option value="" selected disabled hidden>Choose Team</option>
            <option value="red">Red</option>
            <option value="yellow">Yellow</option>
            <option value="blue">Blue</option>
        </select>
        <div id="results">
            <ul class="list"></ul>
        </div>
    </div>
    <script>
        var options = { 
                         valueNames: ['color', 'shade'],
                         item: '<li><span class="color" style="font-weight: bold;"></span>&nbsp;<span class="shade" style="font"></span>'
         };
        var values = [
          {
            color: 'red',
            shade: 'gray'
          },
          {
            color: 'yellow',
            shade: 'white'
          },
          {
            color: 'blue',
            shade: 'black'
          }];
         var userList = new List('assignees', options, values); 

        /*


        // Doesn't Work
        $('#filterteams').change(function () {
            var selection = this.value; 
            // filter items in the list
            userList.filter(function (item) {
                return (item.values().color == selection);
            });
        });

        // Doesn't Work
        $(document).ready(function(){
            $("select.filterteams").change(function(){
                var selectedColor = $(this).children("option:selected").val();
                alert("You have selected the color: " + selectedColor);
            });
        });



        */

        // Of course this works
        alert();
    </script>
</body>
</html>

当我更改选择框中的选项时，什么也没有发生。它不会过滤两个jquery示例之间的结果。但是我的alert（）很好用。

Answer 1

您没有包括jQuery库。

在<head>部分添加以下内容：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

此外，您需要在script部分进行以下更改-您可以在此fiddle上查看结果：

var options = { 
                 valueNames: ['color', 'shade'],
                 item: '<li><span class="color" style="font-weight: bold;"></span>&nbsp;<span class="shade" style="font"></span>'
 };
var values = [
  {
    color: 'red',
    shade: 'gray'
  },
  {
    color: 'yellow',
    shade: 'white'
  },
  {
    color: 'blue',
    shade: 'black'
  }];
 var userList = new List('assignees', options, values); 

// Works
$(document).ready( function() {
  $('.filterteams').on('change', function () {
      var selection = this.value; 
      // filter items in the list
      userList.filter(function (item) {
          return (item.values().color == selection);
      });
  });
});

Answer 2

您使用了错误的选择器＃，它是ID的。是类的。

只需使用正确的选择器$（“。filterteams”）进行调用，或在选择的对象上添加ID，然后使用＃

进行调用

    $(document).ready(function(){
        $(".filterteams").change(function(){
            var selectedColor = $(this).children("option:selected").val();
            alert("You have selected the color: " + selectedColor);
        });
    });

为什么功能性jQuery代码在我的身体末端无法正常工作？

2 个答案: