更改kendo ui下拉列表的选定值

时间:2013-04-19 14:12:55

标签: javascript jquery asp.net-mvc kendo-ui telerik

我的观点中有kendo ui dropdownlist

$("#Instrument").kendoDropDownList({
    dataTextField: "symbol",
    dataValueField: "symbol",
    dataSource: data,
    index: 0
});

如何使用jQuery更改它的选定值? 我试过了:

$("#Instrument").val(symbol);

但它没有按预期工作。

5 个答案:

答案 0 :(得分:65)

您必须使用Kendo UI DropDownList select方法(here中的文档)。

基本上你应该:

// get a reference to the dropdown list
var dropdownlist = $("#Instrument").data("kendoDropDownList");

如果您知道可以使用的索引:

// selects by index
dropdownlist.select(1);

如果没有,请使用:

// selects item if its text is equal to "test" using predicate function
dropdownlist.select(function(dataItem) {
    return dataItem.symbol === "test";
});

JSFiddle示例here

答案 1 :(得分:27)

最简单的方法是:

$("#Instrument").data('kendoDropDownList').value("A value");

这是JSFiddle example

答案 2 :(得分:5)

由于这是与此相关的问题的顶级搜索结果之一,我觉得值得一提的是如何使用Kendo()。DropDownListFor()也可以。

一切都与OnaBai的帖子相同,除了你如何根据文本和选择器选择项目。

为此,您需要将dataItem.symbol替换为dataItem。[DataTextFieldName]。无论你使用什么模型字段.DataTextField()都是你要比较的。

@(Html.Kendo().DropDownListFor(model => model.Status.StatusId)
    .Name("Status.StatusId")
    .DataTextField("StatusName")
    .DataValueField("StatusId")
    .BindTo(...)
)

//So that your ViewModel gets bound properly on the post, naming is a bit 
//different and as such you need to replace the periods with underscores
var ddl = $('#Status_StatusId').data('kendoDropDownList');    

ddl.select(function(dataItem) {
    return dataItem.StatusName === "Active";
});

答案 3 :(得分:4)

似乎有一种更简单的方法,至少在Kendo UI v2015.2.624中是这样的:

$('#myDropDownSelector').data('kendoDropDownList').search('Text value to find');

如果下拉列表中没有匹配项,Kendo似乎会将下拉列表设置为未选中的值,这是有道理的。

我无法让@Gang's answer工作,但如果您将valuesearch交换,如上所述,我们就是黄金。

答案 4 :(得分:1)

本来可以"本地"按值选择:

dropdownlist.select(1);