Kendo UI DropDownList 多个单独的值

Question

我有一个绑定到 Kendo 数据源的下拉列表，其中包含每个项目，例如：

---

车名
制造商名称
国名

---

当我只有一个显示名称和一个值时，这显然可以正常工作，但是我现在希望页面上有一个单独的跨度来显示当前选择的相应 CountryName。

我最初的想法是如下写我的下拉列表

<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 上看不到 data- 属性。使用剑道的方法是什么？

见 JSFiddle here

Answer 1

一旦我有了正确的思维方式，解决方案就很简单了。我必须对我的模型进行更改并将 kendoDropDown 的数据源设置为此。

这样很容易从下拉列表的选择事件中获取相关值。查看更新的小提琴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);
};