具有一个数据源的多个下拉列表 Kendo答案

【问题标题】：Multiple Dropdown Lists with one DataSource Kendo具有一个数据源的多个下拉列表 Kendo
【发布时间】：2017-04-13 14:14:00
【问题描述】：

我有一个页面为用户提供 5 个带有安全问题的下拉列表。它们是通过本地 DataSource 对象设置的，基本上是一个对象中的 10 个问题。我想将所有 5 个下拉列表绑定到同一个数据源，并且选择了一个问题，将其从数据源中删除，因此您无法为接下来的任何问题选择它。到目前为止，这是我的代码：

var questions =
        [{
            value: "Your first pet\'s name?"
        },
            {
                value: "Your favorite teacher?"
            },
            {
                value: "The city you were born in?"
            },
            {
                value: "Your mother\'s maiden name?"
            },
            {
                value: "The high school you attended?"
            },
            {
                value: "First name of the first person you kissed?"
            },
            {
                value: "What did you want to be when you grow up?"
            },
            {
                value: "The brand of your first car?"
            },
            {
                value: "Your favorite city?"
            }];
    var localDataSource = new kendo.data.DataSource({
        data: questions
    });
    var dropdown = $('.dropdownlist');
        dropdown.kendoDropDownList({
            dataTextField: "value",
            dataValueField: "value",
            dataSource: localDataSource
        });

还有我用来渲染字段的 HTML：

<input class="dropdownlist w250px" name="questions[1][question]" />

每个问题乘以 5。

【问题讨论】：

标签： javascript kendo-ui datasource kendo-dropdown

【解决方案1】：

要实现所需的行为，您可以使用相同的数据，但单独的DataSource 实例，否则您将无法为每个DropDownList 以不同的方式过滤它们。

这是一个示例，您可以将其用作起点并进一步对其进行自定义以匹配您的场景。

http://dojo.telerik.com/aJeHa

使用的 API 包括：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Related Kendo UI DropDownLists</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">

    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
  </head>
  <body>

    <p><input id="ddl1" name="ddl1" class="related-dropdown" /></p>
    <p><input id="ddl2" name="ddl2" class="related-dropdown" /></p>
    <p><input id="ddl3" name="ddl3" class="related-dropdown" /></p>

    <script>

      var data = [
        { id: 1, text: "question 1" },
        { id: 2, text: "question 2" },
        { id: 3, text: "question 3" }
      ];

      for (var j = 1; j <= data.length; j++) {
        $("#ddl" + j).kendoDropDownList({
          dataSource: {
            data: data,
            filter: {}
          },
          dataTextField: "text",
          dataValueField: "id",
          optionLabel: "Select a question",
          change: onChange
        });
      }

      function onChange(e) {
        if (e.sender.value()) {
          var otherDropDowns = $("input.related-dropdown").not(e.sender.element);
          for (var j = 0; j < otherDropDowns.length; j++) {
            var ddl = $(otherDropDowns[j]).data("kendoDropDownList");
            var newCondition = { field: "id", operator: "neq", value: e.sender.value() };
            var currentFilter = ddl.dataSource.filter();
            if (currentFilter && currentFilter.filters) {
              currentFilter.filters.push(newCondition);
              ddl.dataSource.filter(currentFilter);
            } else {
              ddl.dataSource.filter(newCondition);
            }
          }
        } else {
          // clear the freed question from the DropDownLists' filter criteria
        }
      }

    </script>

  </body>
</html>

【讨论】：