剑道 3 层级联下拉列表

Question

我正在尝试做一个简单的级联下拉列表，但由于某种原因，3 个下拉列表没有正确级联。正在从上一个下拉列表中级联 engineType 不考虑品牌。

例如选择make->Audi，然后选择EngineType->Deisel。 3 下拉列表应显示“A4”。但它显示了所有 Deisel 引擎。

任何帮助都会很好。

$(document).ready(function () {

  var makes = $("#makes").kendoDropDownList({
        autoBind: true,
        optionLabel: "Select",
        dataTextField: "make",
        dataValueField: "make",
        dataSource: [
            { make: "Audi"},
            { make: "BMW" },
            { make: "Saab"}
        ]
  }).data("kendoDropDownList");

  var engineType = $("#engineTypes").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "makes",
        optionLabel: "Select",
        dataTextField: "engineType",
        dataValueField: "engineType",
        dataSource: [
            { make: "Audi", engineType: "Deisel"},
            { make: "Audi", engineType: "Petrol"},
            { make: "BMW", engineType: "Deisel"},
            { make: "Saab", engineType: "Deisel"}
        ]
  }).data("kendoDropDownList");

  var models = $("#models").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "engineTypes",
        optionLabel: "Select",
        dataTextField: "chose",
        dataValueField: "chose",
        dataSource: [
          { make: "Audi", engineType: "Deisel", chose: "A4"},
            { make: "Audi", engineType: "Petrol", chose: "A5"},
            { make: "BMW", engineType: "Deisel", chose: "3 Series"},
            { make: "Saab", engineType: "Deisel", chose: "900"}
        ]
  }).data("kendoDropDownList");

});

Answer 1

问题是因为第二个下拉列表（引擎类型）包含重复值。您需要为每个项目赋予一些独特的价值。像这样的：

 var engineType = $("#engineTypes").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "makes",
        optionLabel: "Select",
        dataTextField: "engineType",
        dataValueField: "value",
        dataSource: [
          { make: "Audi", engineType: "Deisel", value: 1 },
          { make: "Audi", engineType: "Petrol", value: 2 },
          { make: "BMW", engineType: "Deisel", value: 3 },
          { make: "Saab", engineType: "Deisel", value: 4}
        ]
  }).data("kendoDropDownList");

  var models = $("#models").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "engineTypes",
        optionLabel: "Select",
        dataTextField: "chose",
        dataValueField: "chose",
        dataSource: [
          { make: "Audi", value: 1, chose: "A4"},
          { make: "Audi", value: 2, chose: "A5"},
          { make: "BMW", value: 3, chose: "3 Series"},
          { make: "Saab", value: 4, chose: "900"}
        ]
  }).data("kendoDropDownList");

这是一个现场演示：http://jsbin.com/izahAWi/1/edit