How to Get Dropdown's Selected Item's text in Kendo UI?

问题

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

 $("#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 ?

回答1:

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

$("#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.

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.

ID - 1 Name - John Smith

$("#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:

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

@(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 ,

  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

回答5:

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

回答6:

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);
    }
});