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.

Kendo UI for jQuery Kendoka image

The DropDownList is part of Kendo UI for jQuery, a professional grade UI library with 100+ 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 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.

    <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

For more information on implementing specific scenarios, refer to the Knowledge Base section.

See Also

In this article
Not finding the help you need? Improve this article