0

単純なカスケード ドロップダウン リストを実行しようとしていますが、何らかの理由で 3 つのドロップダウン リストが正しくカスケードしません。make を考慮せずに、前のドロップダウン リスト ナットから engineType をカスケードしています。

たとえば、make->Audi を選択してから、EngineType->Deisel を選択します。3 ドロップダウンリストには「A4」が表示されます。しかし、それはすべてのディーゼルエンジンを示しています。

これに関してどんな助けも素晴らしいでしょう。

$(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");

});
4

1 に答える 1

1

この問題は、2 番目のドロップダウン リスト (エンジン タイプ) に重複した値が含まれているために発生します。各アイテムに独自の価値を与える必要があります。このようなもの：

 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

于 2013-09-19T14:13:14.233 に答える