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

我在redered HTML 上看不到数据属性。使用 Kendo 实现此目的的方法是什么？

参见 JSFiddle here

Answer 1

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

这样可以很容易地从下拉列表中的 select 事件中获取 relatedValue。查看更新 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);
};

Kendo UI DropDownList 多个单独的值

Kendo UI DropDownList multiple, separate values

html

kendo-ui

kendo-asp.net-mvc

kendo-dropdown