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


        

Answer 1

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

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

Answer 2

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

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

Answer 6

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>