为什么功能性jQuery代码在我的身体末端无法正常工作? [重复]

问题描述 投票:0回答:2

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

选择框不会像输入文本一样过滤数据。我遵循了URL herehere,并且空手而归。第二个链接有效,但是我正在寻找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()很好用。

javascript jquery html css
2个回答
-1
投票

您使用的是错误的选择器,该选择器用于ID,用于类。

只需使用正确的选择器$(“。filterteams”)进行调用,或在您的选择上添加一个ID并使用#进行调用即可

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

-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);
      });
  });
});
© www.soinside.com 2019 - 2024. All rights reserved.