Kendo UI [kendoDropDownList] - OnSelect默认selcectbox值，动态更改其他选择框值

Question

我正在使用Kendo UI DropDownList插件。

我有一个主选择框和一个副选框。如果我从主选择框中选择除 - 选择 - 选项以外的任何选项，则显示“子选择框”容器。

如果我来自主选择框选择Primary 1，而不是从子选择框的值应该替换为

P1 Sub1 P1 Sub2 P1 Sub3

如果我选择Primary 2，来自主选择框Default option 1...，子选择框的值应该替换为

P2 Sub1 P2 Sub2 P2 Sub3

HTML

<select id="mainSelect" class="required"> 
    <option>-- Select --</option> 
    <option>Primary 1</option> 
    <option>Primary 2</option> 
</select> 

<div id="ss-container" style="display:none;margin-top:20px;"> 
    <select id="subSelect"> 
    <option>Default option 1</option> 
    <option>Default option 2</option> 
    </select> 
</div> 

jQuery代码

jQuery("#mainSelect").kendoDropDownList({ 
    select: function (e) { 
    var index = e.item.index(); 
    if (index == 0) { 
     jQuery('#ss-container').hide(); 
    } 
    else if (index == 1) { 
     jQuery('#ss-container').show(); 
    } 
    else if (index == 2) { 
     jQuery('#ss-container').show(); 
    } 
    else{    
     jQuery('#ss-container').hide(); 
    } 
    } 
}); 
jQuery("#subSelect").kendoDropDownList({}); 

任何建议吗？

Online Demo

Answer 1

你有两种方法可以做到这一点。无论是通过JavaScript数组，或通过从后端的JSON源加载它。

通过JavaScript数组：

var dataSourceForPrimary1 = ['P1 S1', 'P1 S2']; 
var dataSourceForPrimary2 = ['P2 S1', 'P2 S2']; 
    jQuery("#mainSelect").kendoDropDownList({ 
    select: function (e) { 
     var index = e.item.index(); 
     if (index == 0) { 
     jQuery('#ss-container').hide(); 
     } 
     else if (index == 1) { 
     jQuery('#ss-container').show(); 
     $("#subSelect").kendoDropDownList({dataSource : dataSourceForPrimary1}); 
     } 
     else if (index == 2) { 
     jQuery('#ss-container').show(); 
     $("#subSelect").kendoDropDownList({dataSource : dataSourceForPrimary2}); 
     } 
     else{    
     jQuery('#ss-container').hide(); 
     } 
    } 
    }).data("kendoDropDownList"); 

或通过得到它作为一个JSON结果：

var dataSource = new kendo.data.DataSource({ 
    transport: { 
    read: { 
     url: "http://testService/comboBoxValues", 
     dataType: "jsonp", 
     data: {comboBoxIndex: index} 
    } 
    } 
}); 
$("#dropdownlist").kendoDropDownList({ 
    dataSource: dataSource, 
    dataTextField: "ComboBoxName", 
    dataValueField: "DropdownListId" 
});