如何在 Kendo UI 中获取下拉列表中选定项目的文本？答案

【问题标题】：How to Get Dropdown's Selected Item's text in Kendo UI?如何在 Kendo UI 中获取下拉列表中选定项目的文本？
【发布时间】：2014-03-03 06:42:52
【问题描述】：

我正在使用 Kendo UI 控件。我想在 jquery 中获取下拉列表的选定文本。我用过这个语法：

 $("#ddl").data("kendoDropDownList").text();

我能够在除 IE 之外的所有浏览器中获取文本。我不知道为什么这在 IE 中不起作用，请帮助我。有没有其他方法可以获取选定的文本？

【问题讨论】：

这个问题需要适度。由于进行了一些编辑（我想），与作者所说的“不起作用”以及答案（带投票）实际上没有区别。 @Ram Sigh - 哪个版本的 IE 失败了？

标签： asp.net kendo-ui dropdownbox kendo-dropdown

【解决方案1】：

为了获取 DropDownList 的文本值，使用如下命令：

$("#ddl").data("kendoDropDownList").text();

【讨论】：

你能解释一下你的答案代码和我的问题代码有什么区别吗?????????????
通过 jQuery.data() 访问现有的 DropDownList。调用 jQuery.data(element) 将所有元素的关联值作为 JavaScript 对象检索。即 jQuery 本身使用这种方法来存储数据以供内部使用。比如事件处理程序，所以不要假设它只包含你自己的代码已经存储的数据。

【解决方案2】：

对于 DropDownLists，您包括一个 DisplayText 和一个 Value。 DisplayText 是用户选择的内容，Value 是后端使用的内容。

示例：您有一个存储联系人信息的数据库，您的 DisplayText 将是联系人姓名，值将是数据库中该特定行的主键 ID 字段。

ID - 1 姓名 - 约翰·史密斯

$("#ddl").data("kendoDropDownList").dataItem().DisplayText = John Smith
$("#ddl").data("kendoDropDownList").dataItem().Value = 1

这就是我想要做的，我希望这也是你正在寻找的答案。

【讨论】：

【解决方案3】：

当在选择事件中从下拉列表中选择一个值时，所选值如下所示，

@(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; // value of the dropdown
                var bookName = dataItem.BookName; // text of the dropdown
               //other user code
}

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

谢谢

【讨论】：

var "bookId" 是重复的，第二个应该叫做 "bookName" 或者类似的。否则，很好的答案，谢谢。

【解决方案4】：

这里是fiddle 有人想试用

<select id="testDrpDown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="1231231">and so on</option>
</select>
</br>
</br>
<button onclick="MethOne()">Method one</button>
</br>
</br>
<button onclick="Methtwo()">Method one</button>

<script>
$("#testDrpDown").kendoDropDownList();

//var can be used anuwhere in js
var dropdown = $("#testDrpDown").data("kendoDropDownList");

function MethOne() {
    alert($("#testDrpDown").data("kendoDropDownList").text());
}

function Methtwo() {
    alert(dropdown.text());
}
</script>

【讨论】：

你能解释一下你的答案代码和我的问题代码有什么区别吗?????????????
$("#ddl").data("kendoDropDownList").text();将直接获取文本，但是如果“ddl”未初始化并且您最终可能会出错（即下拉列表将未定义），因此为避免这种情况，我将在 var 中获取引用并在 JS 中使用 var与未定义的检查。如果您遇到问题，可能是因为这个..还请发布您的完整代码

【解决方案5】：

你可以这样试试

 var ddl= $("#ddl").data("kendoDropDownList").dataItem($("#ddl").data("kendoDropDownList").select()).FieldName;
//FieldName is the text field of DataSource ---  .DataTextField("FieldName")

【讨论】：

【解决方案6】：

这是另一种方式：

e.item[0].textContent

完整示例：

$("#ancillaryTestDDL").kendoDropDownList({
    dataSource: that.viewModel.ancillaryTestDS,
    dataTextField: "DisplayValue",
    dataValueField: "Id",
    select: function (e) {
        console.log(e.item);
        console.log(e.item[0].textContent);
    }
});

【讨论】：

【解决方案7】：

我同意 d.popov，您的问题似乎就是答案。将您的语句放在警报功能中会弹出所选文本：

警报($("#ddl").data("kendoDropDownList").text());

在 IE11 中测试。从未提及与该问题相关的实际 IE 版本...

【讨论】：

【解决方案8】：

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

【讨论】：