双向级联剑道下拉列表-这是可能的

Two way cascading Kendo dropdownlist -- Is this possible?

本文关键字：下拉列表 级联      更新时间：2023-09-26

我有两个下拉列表，我想让它们相互交互

假设我有一个他们所属的人和组的列表。var personList = ['Steve'， 'Billy'， 'Terrence']，groupList =[‘有趣的’,‘工作’,' part-time-alien '],

我想要的行为是，用户可以选择一个人，第二个下拉菜单将填充他们所属的所有组。但是，如果用户首先选择了一个组，它应该提供从person下拉菜单中选择属于该组的所有人的选项。

到目前为止，我看到的唯一的例子只处理单向级联。有没有可能有两种方法呢?

理想情况下，我想实现这一点，只有两个下拉，但我能想到的其他解决方案是有几个单选按钮在上面，并取决于选择哪一个可以改变下拉的配置在飞行?

或者有两对下拉框，一个是人物下拉框在最上面，另一对是分组下拉框在最前面。

同样，我真的更喜欢只使用两个下拉菜单。有人能给我指个方向吗?

不使用内置的级联处理，只使用两个下拉框的change事件。例如:

var data = [
    { text: "Steve", value: "1", groups: ["1", "2"] },
    { text: "Billy", value: "2", groups: ["3"] },
    { text: "Terrence", value: "3", groups: ["2", "3"] }
];
var dataG = [
    { text: "Fun", value: "1", people: ["1"] },
    { text: "Work", value: "2", people: ["1", "3"] },
    { text: "Part Time Alien", value: "3", people: ["2", "3"] }
];
// create DropDownList from input HTML element
$("#people").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    optionLabel: "Select person...",
    change: function(e){
      var dataItem = e.sender.dataItem();                          
      var GroupList = [];
      for (i = 0; i < dataG.length; i++){
         if ($.inArray(dataG[i].value, dataItem.groups) > -1){
           GroupList.push(dataG[i]);
         }
      }
      var dropdownlist = $("#groups").data("kendoDropDownList");
      dropdownlist.setDataSource(GroupList);
    }
});
$("#groups").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: dataG,
    optionLabel: "Select group...",
    change: function(e){
      var dataItem = e.sender.dataItem();
      var PeopleList = [];
      for (i = 0; i < data.length; i++){
         if ($.inArray(data[i].value, dataItem.people) > -1){
           PeopleList.push(data[i]);
         }
      }
      var dropdownlist = $("#people").data("kendoDropDownList");
      dropdownlist.setDataSource(PeopleList);
    }
});

相关文章：