jQuery DropDownList

The jQuery DropDownList is a form component which enables users to select a single item from a popup list of options. A richer version of the HTML <select> element, the DropDownList provides flexible data binding, virtualization, cascading lists, appearance customization through templates, events, validation, accessibility, RTL support and keyboard navigation.

See the jQuery DropDownList Overview demo

The jQuery DropDownList enables you to bind it to various forms of data, including datasets of complex items (objects) or an array of primitive items. Data can be locl or remote. As a part of this binding, fields can be defined to represent the text displayed to the user as well as a separate underlying value to be used by developers.

See the jQuery DropDownList Remote Date Binding Demo

Avoid loading unneeded data items by binding a subset of data through server filtering. This helps the DropDownList perform better and helps the user discover information by presenting a more narrow set of options.

See the jQuery DropDownList Server Filtering demo

The Kendo UI for jQuery DropDownList can handle large datasets without compromising performance. It comes with built-in virtualization that can easily process hundreds of thousands of data items at the speed of the users scrolling through the available options.

See the jQuery DropDownList Virtualization demo

Save space while retaining the context of the form field with the DropDownList Floating Label feature. Create smoother and more efficient experience for end-users by adding a label that moves above the input upon clicking.

See the jQuery DropDownList Floating Label demo

Group similar data items in natural categories to help users quickly and easily navigate and understand drop-down list. Define the field responsible for each category while you bind your dataset to the Kendo UI for jQuery DropDownList.

See the jQuery DropDownList Grouping demo

The jQuery DropDownList  UI component supports an adaptive mode that provides a mobile-friendly rendering of the component popup. When enabled, the component will automatically adapt to the current screen size and will change its rendering accordingly.  

See the jQuery DropDownList Adaptive Mode demo

Out of the box, the DropDownList renders items as plain text. You can utilize templates to create a custom layout for each element, including the list items, the list value, the header and footer areas, as well as the message displayed when no data is connected to the jQuery DropDownList.

See the jQuery DropDownList Templates demo

You can connect several jQuery DropDownLists to act as a data filtering mechanism—selecting a value in one affects the available options in the other. This is often referred to as Cascading DropDownLists. 

See the jQuery CascadingDropDownList demo

The Add New Item feature is a very convient way for you to allow users to update the data set. When a user types a value in the filter box that does not exist, they will be presented with the option to add the item to the data.

See the jQuery DropDownList Add New Item demo

The jQuery DropDownList supports any globalization or localization scenarios. You can also enable RTL mode to display the control’s text and UI elements from left to right.

Read the jQuery DropDownList Globalization documentation

Improve accessibility and productivity with keyboard-only navigation. This component supports keyboard navigation to help navigate and interact with items.  

See the jQuery DropDownList Keyboard Navigation demo

The jQuery DropDownList is compliant with Section 508 standards, is AA rated with WCAG 2.0 and follows WAI-ARIA standards.

Read the jQuery DropDownList Accessibility documentation