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

Question

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 ?

Answer 1

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

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

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

Answer 3

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

Answer 4

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>

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

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

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

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

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

Answer 8

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