如何在 kendo UI MVC 中选择下拉列表值和文本答案

【问题标题】：How to select Dropdownlist value and Text in kendo UI MVC如何在 kendo UI MVC 中选择下拉列表值和文本
【发布时间】：2015-11-14 21:50:02
【问题描述】：

我有 Kendo DropDown 列表，我想选择 DropDownList 的选择值。我得到了 Selected Item 的文本，但没有得到应该是 ID 的值。

function onSelect(e) {
        var item = e.item;
        var v = e.value;
        var text = item.text();
        alert(text);
        alert(v);
    };

使用 Dropdownlist 剑道绑定数据

$("#FirstName").kendoDropDownList({
        dataTextField: "Fname",
        dataValueField: "Id",
        dataSource: dataSoucceAll,
    });

将选择功能与剑道下拉列表绑定。

    var dropdownlist = $("#FirstName").data("kendoDropDownList");
    dropdownlist.bind("select", onSelect);

【问题讨论】：

你尝试过 item.value

标签： asp.net-mvc asp.net-mvc-4 kendo-ui kendo-asp.net-mvc

【解决方案1】：

谢谢大家。我也得到了一些解决方案。

  function onSelect(e) {
       //selecting ID from the dropdown list
        var dataItem = this.dataItem(e.item.index());
        var BId = dataItem.Id;


        //Binding with the grid.
        var alg = $("#allgrid").data("kendoGrid").dataSource;

        //Filtering gird with the Id
        if (BId) {
            alg.filter([
                 {
                    "logic": "eq",
                    "filters": [
                        {
                            "field": "Id",
                            "operator": "eq",
                            "value": BId
                        }
                    ]
                }
            ])
        }
        else {
            alg.filter({});
        } 
    };

    //Binding dropdownlist with database
    $("#FirstName").kendoDropDownList({
        dataTextField: "Fname",
        dataValueField: "Id",
        dataSource: dataSoucceAll,
    });

    //Bind Select function with kendo Dropdown list
    var dropdownlist = $("#FirstName").data("kendoDropDownList");
    dropdownlist.bind("select", onSelect);

【讨论】：

【解决方案2】：

就我个人而言，我喜欢通过功能性封装代码。出于这个原因，我更喜欢这种方法：

$("#FirstName").kendoDropDownList({
    dataTextField: "Fname",
    dataValueField: "Id",
    dataSource: dataSoucceAll,
    /* Event select */
    select: function (e) {
       var item = e.item;    // item has selected value
       /* logic here*/
    }
});

查看 Telerik 文档 here 和 here

【讨论】：

【解决方案3】：

在select事件中，可以获取被选中项的底层dataItem：

   var dataitem = e.sender.dataItem(e.item);
   alert(dataitem.Id);

在您的情况下，值是 dataItem.Id。

DEMO

【讨论】：