Select Library: Feature and Functionality Demo Examples

Last updated: 1 month ago

Category: Examples

The Select module enables single and multiple selection, perfectly replacing the native select-single and select-multiple components; it supports fuzzy search and auto-completion.

List Types

The type parameter can set the display type of the list, with options including dropdown, check, button, and list (default is dropdown type).

Tree Data

Since the Select module has built-in Tree module functionality, the dropdown can display not only one-dimensional data but also complex tree-structured data.

Since native select controls cannot select parent branches, for consistency, instances created from native select elements will be forced to span:'leaf', overriding any other settings.

Collapsed Menu

Options are expanded by default, but if there are many options, you can collapse all branches by setting collapseAll:true.

Disabling Clear Buttons

Using Toolbox

To enable branch editing, set tools:true or tools.enable:true to show the toolbox (default shows a clear button).

Adding New Tools

The toolbox is created by the createTools function. The format of tools.children matches the first parameter of this function, allowing creation of new tools through the original method.

Fixed Width

The input box and dropdown list maintain consistent width by default. If the input box is too small or changes size frequently, you can disable width binding by setting autoWidth:false.

Output Field

The default output field is label.

Using Search

Dropdown list search is disabled by default. Enable it by setting search:true or search.enable:true.

Using Status Bar

After opening the dropdown menu, you can enable the list status bar by setting status:true.

In manual edit mode, you can eliminate the need for option data and dropdown menus by setting popup:false or popup.enable:false.

In this case, editing will rely entirely on manual input.

Auto-completion

In manual edit mode, you can enable search and auto-completion by setting search:true or search.enable:true.

Allowing Duplicate Values

Using Hidden Fields

Set the name parameter to enable hidden field value passing, which can be included in forms for data submission.

Sizes

Three sizes are supported via the size parameter: