Select Component: How to Use Data Sources
Category: ExamplesThe select component supports both single and multiple selection, perfectly replacing native select-single and select-multiple components; it features fuzzy search and auto-completion.
Select Component: How to Use Data Sources1 month ago Select Component: Feature and Functionality Demo Examples1 month ago Select Component1 month ago Select Library: Event and Method Examples1 month ago Select Library: How to Use Data Sources1 month ago Select Library: Feature and Functionality Demo Examples1 month ago Select Library1 month ago
Simple Grouping
The native select element supports hierarchical grouping through the optgroup tag, which can be used directly to create two-level grouping.
Using Complete Structure Trees
When writing data on list nodes:
Using Plain Text Data
Multiple option texts separated by English commas.
Using Script Tags to Pass Data
you can use script tags within the oc-select tag and write the data in standard JavaScript format.
You can also write data directly in HTML format within the target node without using script tags, though this approach is less elegant.
Using Detailed Array Data
When creating instances, the following data properties can be used:
Using Asynchronous JSON Data
Supports loading option data from JSON files, with two supported JSON data structures:
- Flat JSON array data with id and pId fields (single level hierarchy)
- Tree-like JSON array data with children property (multi-level hierarchy)
The data must contain at least a label property.
You can click here to download the database SQL file.