劍道UI的DropDownList多個單獨的值

Question

我已經綁定到一個劍道數據源與每個項目如一個下拉列表：

---

CarName
ManufacturerName
國家或地區名稱

---

顯然，這工作正常當我只有一個顯示名稱和一個值時，現在我想在頁面上單獨顯示相應的國家/地區名稱作爲當前選擇。

我最初的想法是寫我的下拉如下

<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> 

然後用下面的jQuery來填充我的國名跨度。

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

我看不到被重寫的HTML上的數據屬性。使用劍道的方法是什麼？

見的jsfiddle here

Answer 1

一旦我的思維正確的方式，該解決方案是非常簡單的。我必須對模型進行更改，並將kendoDropDown的dataSource設置爲該模型。

這樣就很容易從下拉列表中的select事件中獲取relatedValue。查看更新的小提琴here

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