劍道流氓DropDownlists和可用下拉項目

Question

我使用KendoUI創建級聯dropdownlist。 問題是級聯中的第二個和第三個下拉列表中只有一個應該在其中。

的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> 

和JavaScript

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 fiddle

難道我做錯了什麼或者這是一個錯誤？我在KendoUI 2013.Q1（2013.1.319）

Answer 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 here