New to Kendo UI for jQuery? Start a free 30-day trial

Select

events

Fired when an item from the popup is selected by the user either with mouse/tap or with keyboard navigation.

The event is not fired when an item is selected programmatically.

Since version Q1 2015 (2015.1.318), the option label has been moved outside the item list DOM collection. As a result, jQuery.index() can no longer be used to reliably detect if the option label is the selected dropdown item. A more appropriate approach would be to check if the selected dataItem value is an empty string, and/or check if the selected dateItem's text is equal to the optionLabel string.

e.sender.dataItem(e.item)[e.sender.options.dataValueField] == ""

e.sender.dataItem(e.item)[e.sender.options.dataTextField] == e.sender.options.optionLabel

select

Event Data

e.dataItem `Object`

The data item instance of the selected item.

e.item `jQuery`

The jQuery object which represents the selected item.

e.preventDefault `Function`

If invoked prevents the select action. The widget will retain the previous selected item.

e.sender `kendo.ui.DropDownList`

The widget instance which fired the event.

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [ "Apples", "Oranges" ],
  select: function(e) {
    var item = e.item;
    var text = item.text();
    // Use the selected item or its text
  }
});
</script>

<input id="dropdownlist" />
<script>
function dropdownlist_select(e) {
  var item = e.item;
  var text = item.text();
  // Use the selected item or its text
}
$("#dropdownlist").kendoDropDownList({
  dataSource: [ "Apples", "Oranges" ]
});
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.bind("select", dropdownlist_select);
</script>

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [ "Apples", "Oranges" ],
  select: function(e) {
    //call preventDefault() to prevent the selection
    e.preventDefault();
  }
});
</script>

Select

select

Event Data

e.dataItem Object

e.item jQuery

e.preventDefault Function

e.sender kendo.ui.DropDownList

e.dataItem `Object`

e.item `jQuery`

e.preventDefault `Function`

e.sender `kendo.ui.DropDownList`