Question

我试图做一个简单的级联下拉列表，但出于某种原因，3下拉列表没有正确级联。从前一个下拉列表中加载engineType并不考虑make。

例如选择make-＆gt; Audi，然后选择EngineType-＆gt; 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

Kendo 3 Tier Cascading DropDownList

1 个答案: