我有这个下拉列表
$("#rooms").kendoDropDownList({
template: kendo.template($("#roomsListTemplate").html()),
valueTemplate: kendo.template($("#roomsSelectTemplate").html()),
filter: "contains",
dataTextField: "room",
dataValueField: "id",
dataSource: roomsList,
index: 0,
select: onSelectRoom
});
var rooms = $("#rooms").data("kendoDropDownList");
使用此模板的
<script id="roomsSelectTemplate" type="text/x-kendo-template">
<span class="roomName">
#if (room != 'null' && room != '') { #
#=room#
# } #
#if (availability == 'roomOk') { #
- Available
# } #
</span>
</script>
现在我希望能够以编程方式设置下拉列表文本。我正在尝试:
rooms.text("Select a room...");
这在另一个模板只有一个值的下拉列表上工作正常,但是这个下拉列表有两个值(room和availability)。
Firebug抛出"ReferenceError: availability is not defined",所以问题肯定是模板期望得到 availability
的值。我试过了
rooms.text("Select a room...","Something here");
但是同样的结果和Firebug的错误信息…
你可以在这里看到这两种行为http://jsfiddle.net/pmeconi/jr2kgvsd/1/
当模板上有多个值时,如何使其工作?
提前感谢!
我不知道这是否适用于您的设置,但您可以使用"optionLabel"属性为您的下拉菜单,然后选择0元素。
看看你的小提琴,我稍微修改了一下。
$("#rooms2").kendoDropDownList({
template: kendo.template($("#roomsListTemplate2").html()),
valueTemplate: kendo.template($("#roomsSelectTemplate2").html()),
filter: "contains",
dataTextField: "room",
dataValueField: "id",
optionLabel: "Select room",
dataSource: roomsList,
index: 0
});
$("#changeText2").click(function(e) {
rooms2.select(0);
});
http://jsfiddle.net/jr2kgvsd/2/