如何在Kendo UI中获取Dropdown的Selected Item的文本？

I am using Kendo UI Controls. I want to get the selected text of the dropdown list in jquery. I have used this syntax :

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

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

I am able to get the text in all browsers except IE. I don't know why this is not working in IE, please help me. Is there any other way to get selected Text ?

我可以在IE以外的所有浏览器中获取文本。我不知道为什么这不在IE中工作，请帮帮我。有没有其他方法可以选择文本？

7 个解决方案

#1

In order to get text value of a DropDownList use command as below :

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

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

#2

For DropDownLists, you include a DisplayText and a Value. DisplayText being what the user selects and the Value being what is used in the back-end.

对于DropDownLists，您包含DisplayText和Value。 DisplayText是用户选择的，而Value是后端使用的值。

Example: You have a database that stores Contact information and your DisplayText would be the Contacts Name and the Value would be the Primary Keys ID field for that particular row in the database.

示例：您有一个存储联系信息的数据库，您的DisplayText将是Contacts Name，Value将是数据库中该特定行的Primary Keys ID字段。

ID - 1 Name - John Smith

ID - 1姓名 - 约翰史密斯

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

This is what I was looking to do, I hope this is the answer you were also looking for.

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

#3

Here is a fiddle is anyone wanna tryout

<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>

#4

You can try like this

你可以这样试试

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

#5

Here's another way:

这是另一种方式：

e.item[0].textContent

Full example:

完整示例：

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

#6

When a value is selected from a Dropdownlist in select event the selected value is available as following ,

在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 like following ,

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
}

I believe this will help someone.

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

Thanks

谢谢

#7

I agree with d.popov, your question does seem to be the answer. placing your statement in an alert function pops up the selected text:

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

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

警报（$（ “＃DDL”）的数据（ “kendoDropDownList”）文本（））;

Tested in IE11. The actual IE version related to the problem was never mentioned...

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