Question

我有两个下拉列表，我想互相交流。

假设我有他们所属的人和组的列表。 var personList = [＆＃39; Steve＆＃39;，＆＃39; Billy＆＃39; Terrence＆＃39;]， groupList = [＆＃39; fun＆＃39;，＆＃39; work＆＃39;，＆＃39; part-time-alien＆＃39;];

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

到目前为止，我见过的唯一例子只涉及单向级联。有可能以两种方式做到吗？

理想情况下，我希望只用两个下拉菜单来实现这一目标，但我能想到的其他解决方案是在上面设置几个单选按钮，并且根据选择哪个可以改变动态下拉菜单的配置？

或者有两对下拉菜单，一个是人员下拉列表，另一个是下拉列表下拉列表。

同样，我真的更愿意只用两个下拉菜单来做到这一点。有人能指出我正确的方向吗？

Answer 1

不使用内置的级联处理，只需使用2个下拉菜单的更改事件。 e.g：

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);
    }
});

<强> DEMO

双向级联剑道下拉列表 - 这可能吗？

1 个答案: