Kendo UI for jQuery

jQuery DropDownList

  • A rich jQuery dropdown list complete with data binding, templates, event, validation, globalization, and accessibility.
  • Part of the Kendo UI for jQuery library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
  • Overview

    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

  • Data Binding

    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

  • Server Filtering

    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

  • Virtualization

    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

  • Floating Label

    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

    Kendo UI for jQuery DropDownlist Component Floating Label
  • Grouping

    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

  • Adaptive Mode

    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

    DropDownList Adaptive mode
  • Templates

    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

  • Cascading DropDownLists

    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

  • Add New Item

    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

  • Globalization

    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

  • Keyboard Navigation

    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

    Keyboard Navigation
  • Accessibility

    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

    jQuery accessibility

All Kendo UI for jQuery Components

Next Steps

Next Steps