DropDownList Overview

The Kendo UI DropDownList widget 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.

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 input element to the wrapper element and visible input.

The following example demonstrates how to initialize the DropDownList from an existing <select> element with defined data items.

Example

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

See Also

• Basic Usage of the DropDownList (Demo)
• JavaScript API Reference of the DropDownList
• Troubleshooting