Question

我正在使用Kendo UI DropDownList插件。

我有一个主Selectbox和一个Sub选择框。如果我从主选择框中选择 - 选择 - 选项以外的任何选项，我将显示子选择框容器。

如果我从主选择框中选择Primary 1，则应将子选择框中的Default option 1...替换为

P1 Sub1 P1 Sub2 P1 Sub3

如果我从主选择框中选择Primary 2，则子选择框值应替换为

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默认selcectbox值，动态更改其他选择框值

1 个答案: