Question

我有一个下拉列表绑定到Kendo数据源，每个项目如下：

CarName
ManufacturerName
国家或地区名称

当我只有一个显示名称和一个值时，这显然可以正常工作，但我现在想在页面上单独显示一个跨度来显示当前选择的相应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的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);
};

Kendo UI DropDownList多个单独的值

1 个答案: