【问题标题】:Change selected value of kendo ui dropdownlist更改 kendo ui 下拉列表的选定值
【发布时间】:2013-04-12 23:14:46
【问题描述】:

我认为kendo ui dropdownlist

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

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

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

但它并没有按预期工作。

【问题讨论】:

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


    【解决方案1】:

    您必须使用 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

    【讨论】:

    • 按索引选择工作正常,但第二种解决方案不起作用。我在 return 语句之前在函数中尝试了 alert(dataItem.text) 但它说未定义。
    • 抱歉,我已经编辑了答案,应该是dataItem.symbol。见 JS Fiddle jsfiddle.net/OnaBai/mRmNJ
    • @anilca 如果不知道Index,也可以按Text(dataItem.Text)选择
    • 是否可以使用angularjs来更新选中项?
    • 如果你的KendoDropdown有change事件,你必须在调用select之后再调用dropdownlist.trigger("change");手动触发。
    【解决方案2】:

    最简单的方法是:

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

    这里是JSFiddle example

    【讨论】:

    • 我的项目中出现“Uncaught TypeError: Cannot read property 'value' of undefined”错误
    • @ÖmürBilgili 您可能需要先检查未定义:var inst = $("#Instrument").data('kendoDropDownList'); if (inst) { inst.value("A value"); }
    【解决方案3】:

    由于这是与此相关的问题的热门搜索结果之一,我觉得值得一提的是如何使用 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";
    });
    

    【讨论】:

      【解决方案4】:

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

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

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


      我无法让@Gang's answer 工作,但如果您将他的valuesearch 交换,如上所述,我们就完美了。

      【讨论】:

      • 我做了一个例子,它有效:jsfiddle.net/gangwu6/vjc39eLL/2 我尝试了 .search('A value') 和 .value("A value") 他们都有效,我没有看到任何差异。
      • 当我的 ddl 值中有逗号时,我无法让它工作。例如,如果下拉列表中包含“Horseface, USA”,而我​​搜索“USA”会导致找不到任何结果。
      • @redwards510 我现在没有活跃的 Kendo 项目,但我 你必须有一个 exact 匹配 search .名字不好的函数,我同意。对于您的情况,您需要使用原始data 编写自己的搜索例程,找到完全匹配[再次,通过您自己的搜索例程],然后选择-via-search-function 精确匹配您'我发现。听起来不错?
      • 是的,不那么明显的“搜索”有效,谢谢。 [以及为什么我会有索引,如本页前面所述。我没有实现剑道,只是使用小部件...]
      【解决方案5】:

      可以“本地”按值选择:

      dropdownlist.select(1);
      

      【讨论】:

      • 这在剑道中无法正常工作。它不会触发事件,因此不会更新显示。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-07-21
      • 1970-01-01
      • 2015-05-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多