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

Question

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

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次。

Answer 1

要实现所需的行为，您可以使用相同的数据，但单独的数据源实例，否则您将无法对每个 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>

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

Multiple Dropdown Lists with one DataSource Kendo

javascript

kendo-ui

datasource

kendo-dropdown