更改Kendo UI下拉列表的选定值

Question

我在视图中有一个kendo ui下拉列表：

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

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

但是它并没有像预期的那样工作。

- anilca

Answer 1

您需要使用Kendo UI DropDownList的 select 方法（文档在这里）。

基本上，您应该：

// 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的例子，请点击这里

- OnaBai

---

按索引选择工作正常，但第二种解决方案不起作用。我在函数中尝试了alert(dataItem.text)语句，在返回语句之前，但它显示未定义。 - xkcd

抱歉，我已经编辑了答案，应该是 dataItem.symbol。请参考 JS Fiddle http://jsfiddle.net/OnaBai/mRmNJ/。 - OnaBai

如果您不知道索引，也可以通过文本选择（dataItem.Text）。 - Justin

能否在更新所选项目时使用AngularJS？ - Kim Honoridez

对我没用，当我尝试使用两种方法选择后获取值时，该值为空。 - R K Sharma

如果您的KendoDropdown有“change”事件，那么在调用“select”之后，必须手动触发它，方法是调用“dropdownlist.trigger("change");”。 - Andrew

Answer 2

最简单的方法是：

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

这里是JSFiddle示例。

- Gang

---

在我的项目中出现了“未捕获的类型错误：无法读取undefined的属性'value'”的错误。 - Ömür Bilgili

@ÖmürBilgili 你可能需要先检查是否未定义：var inst = $("#Instrument").data('kendoDropDownList'); if (inst) { inst.value("一个值"); } - Jason

Answer 3

看起来有一种更简单的方法，至少在Kendo UI v2015.2.624中：

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

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

---

我无法让@Gang的答案正常工作，但是如果你将他的value替换为search，如上所述，我们就可以了。

- ruffin

---

我做了一个例子，它可以工作：http://jsfiddle.net/gangwu6/vjc39eLL/2/。我尝试了.search('A value')和.value("A value")两种方法，它们都可以工作，我没有看到任何区别。 - Gang

当我的ddl值中有逗号时，我无法使其正常工作。例如，如果下拉菜单中有“Horseface，USA”，而我搜索“USA”，则什么也找不到。 - redwards510

@redwards510 我现在没有一个活跃的Kendo项目，但是如果我没记错的话，你必须对search进行精确匹配。我同意这个函数名字起得不好。对于你的情况，你需要使用原始的data编写自己的搜索程序，找到一个精确的匹配项[再次通过您自己的搜索程序]，然后通过search函数选择您找到的精确匹配项。听起来不错吧？ - ruffin

是的，不太明显的“搜索”功能可以使用，谢谢。[我为什么要拥有索引，就像在此页面上先前描述的那样。我没有实现Kendo，只是使用小部件...] - Gerry

Answer 4

由于这是与此相关的问题的首要搜索结果之一，因此我觉得值得提到如何在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";
});

- user2958958

Answer 5

可以通过“本地方式”按值选择：

dropdownlist.select(1);

- HSM

---

这个kendo工具无法按预期工作。它不会触发事件，因此无法更新显示屏。 - John Lord