Kendo UI Dropdown mehrere getrennte Werte

Question

ich ein Dropdownlist haben mit jedem Element an einen Kendo Datenquelle gebunden wie:

---

CarName
ManufacturerName
Country

---

Das ist offensichtlich funktioniert gut Wenn ich nur einen Anzeigenamen und einen Wert habe, möchte ich jetzt einen separaten Bereich auf der Seite, um den entsprechenden CountryName für die aktuelle Auswahl anzuzeigen.

Mein erster Gedanke war meine Dropdown-Liste wie folgt zu schreiben

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

Dann die folgende Jquery zu verwenden, um meine Land Namen Spanne zu füllen.

Ich kann das Datenattribut auf dem redered HTML nicht sehen. Wie kann man das mit Kendo erreichen?

See JSFiddle here

Answer 1

Sobald ich auf dem richtigen Weg des Denkens bekam, ist die Lösung ganz einfach. Ich musste meine Änderungen an meinem Model vornehmen und die DataSource von kendoDropDown darauf einstellen.

Auf diese Weise war es einfach, den relatedValue vom Select-Ereignis in der Dropdown-Liste abzurufen. Siehe aktualisierte Geige 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); 
};