コンボボックスを3つ依存させたい場合は、剣道コンボボックスの「cascadeFrom」プロパティを利用すると良いでしょう。簡単な例:
<div>
<input id="category" />
<input id="sports" />
<input id="player" />
</div>
<script>
$("#category").kendoComboBox({
dataTextField: "categoryName",
dataValueField: "categoryId",
dataSource: [
{ categoryName: "Sports", categoryId: 1 },
{ categoryName: "Music", categoryId: 2 }
]
});
$("#sports").kendoComboBox({
cascadeFrom: "category",
dataTextField: "sportsName",
dataValueField: "sportsId",
dataSource: [
{ sportsName: "Football", sportsId: 1, categoryId: 1 },
{ sportsName: "Cricket", sportsId: 2, categoryId: 1 },
{ sportsName: "Pop", sportsId: 3, categoryId: 2 },
{ sportsName: "Rock", sportsId: 4, categoryId: 2 }
]
});
$("#player").kendoComboBox({
cascadeFrom: "sports",
dataTextField: "playerName",
dataValueField: "playerId",
dataSource: [
{ playerName: "David Beckham", playerId: 1, sportsId: 1 },
{ playerName: "Leonel Messi", playerId: 2, sportsId: 1 },
{ playerName: "Xavi", playerId: 3, sportsId: 1 },
{ playerName: "Raina", playerId: 4, sportsId: 2 },
{ playerName: "Gambhir", playerId: 4, sportsId: 2 },
{ playerName: "YXZ", playerId: 4, sportsId: 3 },
{ playerName: "ABC", playerId: 4, sportsId: 3 }
]
});
// To set value in combo-box
$("#category").data('kendoComboBox').value(1);
$("#sports").data('kendoComboBox').value(1);
$("#player").data('kendoComboBox').value(2);
</script>
ここでは、コンボ ボックスに設定する値をハード コードしました。データベースからデータを取得して、ここで設定できます。コンボ ボックスの値フィールドを保存し、それを使用してデータを表示するとよいでしょう。
お役に立てれば。
参照リンク