0

KendoUI を使用してカスケード ドロップダウンリストを作成しています。問題は、カスケードの 2 番目と 3 番目のドロップダウンに、3 つの項目のうち 1 つしかないことです。

HTML

<div id="goodies">
        <input id="uno"  data-bind="source: unoTypes, value: uno" />
        <input id="dos"  data-bind="source: dosTypes, value: dos" />
        <input id="tres"  data-bind="source: tresTypes, value: tres" />
</div>

そしてジャバスクリプト

data = window.kendo.observable({
    uno: null,
    dos: null,
    tres: null,
    baseRomType: null,
    unoTypes: [
                { name: "Bing", id: 1 },
                { name: "Bang", id: 2 },
                { name: "Bong", id: 3 }
    ],
    dosTypes: [
              { name: "Ding", id: 1 },
              { name: "Dang", id: 2 },
              { name: "Dong", id: 3 }
    ],
    tresTypes: [
              { name: "Ring", id: 1 },
              { name: "Rang", id: 2 },
              { name: "Rong", id: 3 }
    ],


});

window.kendo.bind($("#goodies"), data);

$('#uno').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Uno'
});

$('#dos').kendoDropDownList({

    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Dos',
    cascadeFrom: "uno"
});

$('#tres').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Tres',
    cascadeFrom: "dos"
});

JSフィドルを参照してください

私は何か間違ったことをしていますか、それともこれはバグですか? KendoUI 2013.Q1 を使っています (2013.1.319)

4

1 に答える 1

1

これは古い質問であることは知っていますが、私はちょうどそれに出くわし、他の人が同様の問題を抱えている場合に備えて答えを提供すると考えました.

私が知る限り、カスケード ドロップダウンは実際には必要ありませんが、代わりに、前のドロップダウンが選択された後に次のドロップダウンを有効にしたいだけです (オプションに基づいて次のドロップダウンのアイテムをフィルタリングするカスケードとは対照的に)。前のドロップダウンで選択)?

まず、HTML を更新して、有効なバインディングを追加します。

<div id="goodies">
    <input id="uno"  data-bind="source: unoTypes, value: uno" />
    <input id="dos"  data-bind="source: dosTypes, enabled: uno, value: dos" />
    <input id="tres"  data-bind="source: tresTypes, enabled: dos, value: tres" />
</div>

次に、JavaScript を更新してcascadeFrom設定を削除します。

$('#dos').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Dos',
    //cascadeFrom: "uno"
});

$('#tres').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Tres',
    //cascadeFrom: "dos"
});

ここで更新されたjsFiddle を確認できます

于 2013-11-29T10:47:05.747 に答える