Kendo UI DropDownList несколько отдельных значений

У меня есть раскрывающийся список, привязанный к источнику данных 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");

Я не вижу атрибут data- в переработанном HTML. Как этого добиться с помощью кендо?

См. JSFiddle здесь


html kendo-ui kendo-asp.net-mvc kendo-dropdown
person obaylis    schedule 30.06.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Как только я пришел к правильному мышлению, решение довольно простое. Мне пришлось внести изменения в мою модель и установить для нее источник данных kendoDropDown.

Таким образом было легко получить связанное значение из события выбора в раскрывающемся списке. См. обновленную скрипту здесь

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);
};
person obaylis    schedule 04.07.2016