DropDownList Overview
The DropDownList displays a list of values and allows for a single selection from the list.
The user input is restricted within the predefined options. To apply a keyboard input, use the Kendo UI ComboBox.
The DropDownList is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the DropDownList
To initialize the DropDownList, use the <option> tag of an existing <select> element with defined data items.
You can also initialize the DropDownList through binding it to local or remote data and then using the <input> or the <select> element. For more information, refer to the article on data binding.
Regardless of the applied initialization, the performance and functionality of the DropDownList are consistent. For a complete example, refer to the demo on the basic usage of the DropDownList.
- When you initialize the DropDownList, create it within a
$(document).ready()statement because the widget has to be initialized after the DOM is fully loaded.- The DropDownList copies any styles and CSS classes from the
inputelement to thewrapperelement and visible input.
The following example demonstrates how to initialize the DropDownList from an existing <select> element with defined data items.
<select id="dropdownlist">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<script>
$(document).ready(function(){
$("#dropdownlist").kendoDropDownList();
});
</script>
Functionality and Features
- Data binding
- Grouping
- Server filtering
- Virtualization
- Templates
- Adding new items
- Cascading DropDownLists
- Rendering and dimensions
- Globalization
- Accessibility
For more information on implementing specific scenarios, refer to the Knowledge Base section.