Kendo UI [kendoDropDownList] - Sélectionnez la valeur par défaut de la boîte de sélection, Modifiez les autres valeurs de la zone de sélection de manière dynamique - jquery, kendo-ui, kendo-dropdown

J'utilise le plugin DropDownList de Kendo UI.

J'ai une zone de sélection principale et une zone de sélection secondaire. Si je sélectionne une option autre que - Sélection - dans la zone de sélection principale, le conteneur Boîte de sélection secondaire s'affiche.

Si je sélectionne Primary 1 depuis la zone de sélection principale, au lieu de Default option 1... à partir des valeurs de boîte de sous-sélection doivent remplacer comme

P1 Sub1 P1 Sub2 P1 Sub3

Si je sélectionne Primary 2, à partir de la zone de sélection principale, les valeurs de la zone de sous-sélection doivent être remplacées par

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>

Code 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({});

Des suggestions s'il vous plaît?

Démo en ligne

Réponses:

1 pour la réponse № 1

Vous avez deux façons de le faire. Soit via un tableau javascript, soit en le chargeant depuis une source json sur le backend.

Via un tableau 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");

Ou en obtenant un résultat 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"
});

---