검도 UI DropDownList로 여러 별도의 값

Question

내가 각 항목 등으로 검도 데이터 소스에 바인딩 된 DropDownList로했다 : 이것은 분명히 좋은

---

CarName
ManufacturerName
COUNTRYNAME

---

를 작동 그러나 이제는 표시 이름과 값을 가질 때 페이지에서 현재 선택 영역에 해당하는 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에서 데이터 속성을 볼 수 없습니다. 검도를 사용하여이를 달성하는 방법은 무엇입니까? 내가 생각하는 올바른 방법에 도착하면

참조 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); 
};