Log In Sign Up
Home›Docs›Form›Select Library

Select Library

Category: Form
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.

Basic Usage

Apply the oc-select attribute to native select elements to create a dropdown selector.

  • Output
  • HTML
  •

You can also create instances using the id+new approach.

  • Output
  • HTML
  • JS
  •                 
                
            
  •                 
                new orca.Select('#demo0001');

Using Input Elements

You can start from an input element instead of select, with options written in the value attribute separated by commas.

  • Output
  • HTML
  •

List Node Sources

Beyond native select controls, you can also get list data from datalist or ul/ol nodes.

  • Output
  • HTML

Multiple Selection

Set the multiple:true parameter to enable multiple selection. In multiple selection mode, the popup will automatically show bottom buttons for basic clear and confirm operations.

  • Output
  • HTML
  • JS
  •                 
                
            
  •                 
                    new orca.Select('#demo0101',{content:'https://req.orcaui.com/v1/json/v1_en_tab_country_demo.json',contType:'async',multiple:true});

When creating instances from native select elements, single or multiple selection depends on the element's multiple attribute.

  • Output
  • HTML
  •

Initial Values

To pre-select certain options during initialization, use the value parameter. The format follows the first parameter of the valToArr utility function.

  • Output
  • HTML
  • JS

  • One value

    Multi-value

  •                 
                
            
  •                 
                    new orca.Select('#demo0201',{
                        content:'https://req.orcaui.com/v1/json/v1_en_tab_country_demo.json',
                        contType:'async',
                        multiple:true,
                        value:[0,2],
                    });
                    new orca.Select('#demo0202',{
                        content:'https://req.orcaui.com/v1/json/v1_en_tab_country_demo.json',
                        contType:'async',
                        value:[0],
                    });

Initial Disabled State

There are two ways to implement disabled or similar states:

  1. Set disabled:true parameter to disable all operations and copying
  2. Set exclude parameter to disable specific options (format follows first parameter of valToArr function)
  • Output
  • HTML
  • JS

  • disabled

    exclude

  •                 
                
            
  •                 
                    new orca.Select('#demo1001',{
                        content:'https://req.orcaui.com/v1/json/v1_en_tab_country_demo.json',
                        contType:'async',
                        disabled:true,
                    });
                    new orca.Select('#demo1002',{
                        content:'https://req.orcaui.com/v1/json/v1_en_tab_country_demo.json',
                        contType:'async',
                        exclude:[0,2],
                    });

When creating instances from native select or input elements, their disabled attribute will force disabled:true.

  • Output
  • HTML

  • select

    input

  •

Read-only Initialization

Set readonly:true to make the component read-only - existing options cannot be deleted and dropdown selection is disabled.

  • Output
  • HTML
  • JS
  •                 
                
            
  •                 
                    new orca.Select('#demo0703',{
                        content:'https://req.orcaui.com/v1/json/v1_en_tab_country_demo.json',
                        contType:'async',
                        readonly:true,
                        value:[1]
                    });

Basic Configuration

Property Type Default Description
name string '' Hidden input's name attribute
value string '' Initial value
field 'label'/'value' 'label' Output value field
type 'dropdown'/'check'/'button'/'list' 'dropdown' List type
manual boolean false Whether manual edit mode
disabled boolean false Whether disabled
readonly boolean false Whether read-only
full boolean false Whether to fill horizontally
multiple boolean false Whether multiple selection
exclude string/number/DOM/object/array '' Initially disabled items
min number 0 Minimum selection count
max number 0 Maximum selection count
sliced boolean true Whether to clip overflow
removable boolean true Whether to show clear button
unique boolean true Whether values are unique
span 'tree'/'branch'/'leaf' 'leaf' Selection scope
collapse boolean false Whether to collapse all branches

Data Source Configuration

Property Type Default Description
content string '' Data source content
contType 'text'/'async'/'html'/'auto' 'text' Content type
contData object {} Request data parameters
ajax object {} Async request configuration

Data Source Configuration

Property Type Default Description
content string '' Data source content
contType 'text'/'async'/'html'/'auto' 'text' Content type
contData object {} Request data parameters
ajax object {} Async request configuration

Search Configuration

Property Type Default Description
search.enable boolean false Whether to enable search
search.value string '' Initial search value
search.fuzzy boolean true Whether fuzzy search
search.ignore boolean true Whether case insensitive
search.result boolean true Whether to show search results

Tool Module Configuration

Property Type Default Description
tools.enable boolean false Whether to enable toolbox
tools.children array ['close'] Tool type list
popup.enable boolean true Whether to enable popup
tags object {} Tag component parameters
tree object {} Tree component parameters

Wait Functions

Property Type Default Description
b4Expand function null Before expand wait function
b4Collapse function null Before collapse wait function
b4Add function null Before add wait function
b4Edit function null Before edit wait function
b4Remove function null Before remove wait function
b4Graft function null Before drag wait function

Callback Functions

Property Type Default Description
onRendered function null After rendering callback
onTrigger function null Node trigger callback
onAdded function null After add callback
onEdited function null After edit callback
onRemoved function null After remove callback
onOutput function null Output value callback
onDisabled function null Disable callback
onEnabled function null Enable callback
onDisabledAll function null All disable callback
onEnabledAll function null All enable callback
onReadonly function null Readonly callback
onReadonlyAll function null All readonly callback
onPassivated function null Global disable callback
onActivated function null Cancel global disable callback
onExpand function null Before expand callback
onExpanded function null After expand callback
onCollapse function null Before collapse callback
onCollapsed function null After collapse callback
onExpandAll function null Before expand all callback
onExpandedAll function null After expand all callback
onCollapsedAll function null Before collapse all callback
onSelected function null Select callback
onDeselected function null Deselect callback
onSelectedAll function null Select all callback
onChecked function null Check callback
onUnchecked function null Uncheck callback
onCheckedAll function null Check all callback
onTooFew function null Too few selection callback
onTooMany function null Too many selection callback
onFilled function null After fill callback
onTurned function null Page turn callback
onGot function null Get value callback
onSet function null Set value callback
onCleared function null Clear value callback
onGrafted function null Node transfer callback
onUpdatedCont function null Content update callback
onRequest function null Request complete callback

Prev
Datetime Component: Additional Display Methods with Event and Method Demonstration Examples
4 months ago

New Launch: 20% Off All Products

Unlock all examples and development resources