剣道UIのDropDownList複数の、別々の値

Question

私は、各項目で剣道のデータソースにバインドされたドロップダウンリストがあります。

---

CarName
ManufacturerName
COUNTRYNAME

---

明らかにこれは正常に動作しますしかし、表示名と値だけを持っているときは、現在の選択範囲に対応するCountryNameを表示するために、ページ上に別のスパンが必要になります。私の国の名前のスパンを移入するために、次のjQueryを使用して次に

<select id="cars"> 
    <option value="Volvo" data-relatedValue="Sweden">S60</option> 
    <option value="BMW" data-relatedValue="Germany">320</option> 
    <option value="Mercedes" data-relatedValue="Germany">CLA</option> 
    <option value="Ford" data-relatedValue="Usa">Focus</option> 
</select> 

を次のように

私の最初に考えたのは私のドロップダウンを書くことでした。

$("#cars").attr("data-relatedValue"); 

redered HTMLのdata-attributeは表示されません。剣道を使ってこれを達成する方法は何ですか？

参照JSFiddle here

Answer 1

私は思考の正しい道に着いたら、解決策は非常に簡単です。モデルに変更を加え、kendoDropDownのdataSourceをそれに設定しなければなりませんでした。

このように、ドロップダウンリストのselectイベントからrelatedValueを取得するのは簡単でした。更新されたフィドルを見る

var data = [ 
    {manufacturer: "BMW", model: "320", country: "Germany"}, 
    {manufacturer: "Ford", model: "Focus", country: "USA"}, 
    {manufacturer: "Mercedes", model: "CLA", country: "Germany"}, 
    {manufacturer: "Volvo", model: "S60", country: "Sweden"} 
]; 

$("#cars").kendoDropDownList({ 
dataSource: data, 
dataTextField: "model", 
dataValueField: "manufacturer", 
select: onSelect, 
}); 

function onSelect(e) { 
    var dataItem = this.dataItem(e.item); 
    $("#kendoMessageHolder").text(dataItem.country); 
};