如何获取 Kendo DropDownList 的选定值

Posted 2023-05-07

【中文标题】如何获取 Kendo DropDownList 的选定值

【英文标题】：how to get selected value for Kendo DropDownList

【发布时间】：2014-07-05 08:40:16

【问题描述】：

我不知道如何确定在我的剑道下拉列表中选择了哪个项目。我的观点将其模型定义为：

@model KendoApp.Models.SelectorViewModel

ViewModel 定义为：

public class SelectorViewModel

    //I want to set this to the selected item in the view
    //And use it to set the initial item in the DropDownList
    public int EncSelected  get; set; 

    //contains the list if items for the DropDownList
    //SelectionTypes contains an ID and Description
    public IEnumerable<SelectionTypes> ENCTypes

在我看来，我有：

@(html.Kendo().DropDownList()
                    .Name("EncounterTypes")
                    .DataTextField("Description")
                    .DataValueField("ID")
                    .BindTo(Model.ENCTypes)
                    .SelectedIndex(Model.EncSelected)
                )

此 DropDownList 包含我期望的值，但是当用户单击提交按钮时，我需要将选定的值传递回我的控制器。一切正常，除了我无法访问从控制器的 [HttpPost] 操作中选择的项目。那么，如何将 DropDownList 的值分配给隐藏的表单字段，以便控制器可以使用它？

【问题讨论】：

在简历中：$("#myListID").data("kendoDropDownList").value();

【参考方案1】：

对于那些想知道如何在 javascript 中获取选定值的人来说，这是正确的答案：

$("#EncounterTypes").data("kendoDropDownList").value();

来自文档：http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value

【讨论】：

布赖恩 - 感谢您的回复。您对使用 value() 方法访问该值是正确的。但是，在这种情况下，我需要访问控制器中的值，而不是视图。我发布这个问题已经2年了。所以，我是凭记忆去的（那是一个糟糕的记忆）。但我很确定使用 DropDownListFor 将值传递回我的控制器。

我看到了，只是我多次来到这里试图记住如何在 JavaScript 中做到这一点，所以我决定把答案放在这里。

这对我不起作用，我得到 [obj, obj] 作为值。

@luisluix 为我工作，这是文档中的内容 - 不知道该告诉你什么。 :/ 你确定你没有使用 val() 什么的吗？

这在 IE11 中似乎不适合我

【参考方案2】：

当从下拉列表中选择一个值时，在 select 事件中，我们可以得到如下选择的值，

@(Html.Kendo().DropDownList()
              .Name("booksDropDown")
              .HtmlAttributes(new  style = "width:37%" )
              .DataTextField("BookName")
              .DataValueField("BookId")
              .Events(x => x.Select("onSelectBookValue"))
              .DataSource(datasource => datasource.Read(action => action.Action("ReadBookDropDow", "PlanningBook").Type(HttpVerbs.Get)))
              .OptionLabel("Select"))

javascript函数如下，

   function onSelectBookValue(e)     

                    var dataItem = this.dataItem(e.item.index());
                    var bookId = dataItem.BookId;
                 //other user code
    

我相信这会对某人有所帮助

谢谢

【讨论】：

正是我需要的！谢谢

【参考方案3】：

您好，我刚刚遇到这个问题，一直在寻找 2 个小时，并想出了我自己的解决方案。

所以这是获取剑道下拉菜单中的任何数据的行。

$("#customers").data("kendoDropDownList").dataSource._data[$("#customers").data("kendoDropDownList").selectedIndex].colour;

只需将客户 ID 更改为您在剑道下拉菜单中提供的 ID。

【讨论】：

如果您这样做，您需要从所选索引中减去 1，因为索引将比数组位置多 1 示例：$("#customers").data("kendoDropDownList").selectedIndex - 1

【参考方案4】：

也许您应该像您认为的那样使用 Kendo DropDownList 的 DropDownListFor 构造：

@(Html.Kendo().DropDownListFor(m => m.EncSelected)
                    .Name("EncounterTypes")
                    .DataTextField("Description")
                    .DataValueField("ID")
                    .BindTo(Model.ENCTypes)
                    .SelectedIndex(Model.EncSelected)
                )

这样，当您提交时，它将在 POST 请求中可用，您无需在任何地方放置隐藏字段。

但是如果您出于某种原因需要使用隐藏字段，请将其放在那里，下拉列表的subscribe the the select event 并使用 JQuery（例如）将所选项目放在隐藏字段上。

这是你的选择:)

【讨论】：

如果可以的话，我会投反对票，但原因可能是因为 POST 请求将包含“DataTextField”而不是“DataValueField”提供的值

其实这样是不对的。如果使用的是绑定到模型的 DropDownListFor，则发布请求将包含下拉列表所绑定的模型属性中包含的下拉列表选定值。

您可以在下面的gist 中看到这一点，并使用 Fiddler 之类的东西查看请求。

不知道为什么有人对此投了反对票...如果能得到一些反对票的理由就好了... :^)

【参考方案5】：

如果您还想读出下拉菜单的文本，您可以使用以下剑道函数获取或设置值：

$('#EncounterTypes').data("kendoDropDownList").text();

REFERENCE TO THE DOCUMENTATION

使用 @Vivek Parekh 提到的 .val() 是行不通的 - 剑道框架中没有函数 .val()。

如果你愿意，你可以使用 jQuery 并取回值：$('#EncounterTypes').val()

【参考方案6】：

Updated DEMO

$("#EncounterTypes").kendoDropDownList().val();

【讨论】：

恐怕这不应该被赞成。调用 .kendoDropDownList() 实际上重新初始化了控件，在我的例子中，我正在执行 AJAX 绑定，从中删除了所有数据。我发布了一个适用于所有情况的答案。

【参考方案7】：

您可以像下面的代码一样获取所选项目，然后使用 item.property 获取更多信息

var selectedFooType = $("#fooType").data("kendoDropDownList").dataItem();
    selectedFooType.name 
//OR
    selectedFooType.id