Kendo UI DropDownList multiple, separate values

Question

I have a dropdownlist bound to a Kendo datasource with each item such as:

---

CarName
ManufacturerName
CountryName

---

This obviously works fine when I just have a display name and a value, however I now want a separate span on the page to show the corresponding CountryName for the current selection.

My initial thought was to write my dropdown as follows

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

Then to use the following jquery to populate my country name span.

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

I can't see the data- attribute on the redered HTML. What is the way to achieve this using Kendo?

See JSFiddle here

Answer 1

Once I got to the right way of thinking, the solution is quite straightforward. I had to make my changes to my Model and set the kendoDropDown's dataSource to that.

This way it was easy to get the relatedValue from the select event on the dropdownlist. See updated fiddle 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);
};