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 ?

Ambrosio

This question need some moderation. Due to some edits (I suppose) there is really no difference from what the author stated DOES NOT WORK, and what the answers (with votes) are. @Ram Sigh - what version of IE it fails? – Hillery

Answer 1

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

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

Oink

Can you please explain what is the difference between your answer's code and my question question's code????????????? – Ambrosio

Accessing an Existing DropDownList via jQuery.data().Calling jQuery.data( element ) retrieves all of the element's associated values as a JavaScript object. That jQuery itself uses this method to store data for internal use. Such as event handlers, so do not assume that it contains only data that your own code has stored. – Oink

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.

Stein

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

Ese

var "bookId" is repeated, the second one should be called "bookName" or similar. Otherwise, good answer, thanks. – Adna

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>

Bratcher

Can you please explain what is the difference between your answer's code and my question question's code????????????? – Ambrosio

$("#ddl").data("kendoDropDownList").text(); will get text directly, however if "ddl" is not initialized and you might end up in error (i.e the drop down will be undefined), so to avoid this i will get the reference in a var and use the var in JS, along with undefnied check. if you are facing problem it might be because of this.. also pls post your complete code – Bratcher

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

Chiu

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

Desdee

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

Eagan

Answer 8

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

Flatfish

That get's the value not the text as asked in the question. – Darceldarcey