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

Question

我正在使用 Kendo UI DropDownList 插件。

我有一个主 Select 盒子和一个子 select 盒子。如果我 select 除了 -- Select -- 主 select 框中的选项之外的任何选项，我将显示子 select 框容器。

如果我 select Primary 1 来自主 select 框，而不是来自子 select 框的 Default option 1... 值应该替换为

P1 Sub1 P1 Sub2 P1 Sub3

如果我 select Primary 2，从主 select 框，子 select 框的值应该替换为

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"
});

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

Kendo UI [kendoDropDownList] - OnSelect default selcectbox value, Change other selectbox values dynamically

jquery

kendo-ui

kendo-dropdown