select

Gets or sets the selected item. Selects the item provided as an argument and updates the value and text of the widget.

• If the widget is not bound (e.g. autoBind is set to false), the select method will not pre-fetch the data before continuing with the selection and value setting (unlike the value method), and no item will be selected.
• The numeric argument indicates the item index in the dropdown, not in the dataSource. If an optionLabel is used, the dropdown item index can be obtained by incrementing the respective dataSource item index by 1.
• When virtualization is enabled, the method does not support selection with a function predicate. The predicate function looks only in the current datasource view, which represents only the active range/page. Hence it will not work properly.
• This method does not trigger change event. This could affect MVVM value binding. The model bound to the widget will not be updated. You can overcome this behavior trigerring the change event manually using trigger("change") method.

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [ "Apples", "Oranges" ]
});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.select(1);
dropdownlist.trigger("change");
</script>

Parameters

li jQuery | Number | Function

A string, DOM element or jQuery object which represents the item to be selected. A string is treated as a jQuery selector. A number representing the index of the item or function predicate which returns the correct data item.

Returns

Number The index of the selected item, if called with no parameters. If a custom value is entered, the returned selected index is -1.

undefined If called with a parameter as a setter.

Example - select item based on jQuery object

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");

dropdownlist.select(dropdownlist.ul.children().eq(0));
</script>

Example - select item based on index

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");

dropdownlist.select(1);
</script>

Example - select item based on function predicate

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");

dropdownlist.select(function(dataItem) {
    return dataItem.name === "Apples";
});
</script>

Example - get selected index of the widget

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id",
  index: 1
});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");

var selectedIndex = dropdownlist.select();
</script>