Select Group Controller is a Stimulus controller for creating related select boxes.
Select Group can create parent select boxes from the child select box so that the child will work alone if the JavaScript fails.
| Target | Element(s) | Description |
|---|---|---|
|
select |
The select from which to create parent selects. | |
| label |
The label for the select. Optional |
These are standard HTML attributes (with no prefix) used by Table Filter.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| aria-busy |
(controller) |
false |
true false |
The controller will set this to true any time it is taking action. You can use the value in your CSS to indicate that work is in progress. |
All of these attributes are prefixed with "data-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| controller |
(any) |
selectgroup |
This attribute provides the related selects functionality. It should be placed on a container element that contains the select to be enhanced. |
|
| action |
select |
selectgroup#onParentChange | (string) |
The controller will add this to any select that it creates. This is what tells Stimulus to take action, but you need not add this yourself unless you want to change the way it works for some reason. |
| label |
option |
(string) |
Sets a default value for data-selectgroup-label. (see below) |
All of these attributes are prefixed with "data-selectgroup-" in the attribute name.
| Attribute | Element(s) | Default | Value(s) | Description |
|---|---|---|---|---|
| delimiter |
(controller) |
: | (any string) |
This indicates the delimiter used to separate the different levels of the hierarchy. This could be used in the disply of the options or |
| label |
(controller) |
(any string) |
The label of the final select box. |
|
| parents |
(controller) |
(see description) |
This is a list of the parent levels in the hierarchy, separated by the delimiter. Alternately, you can use a JSON array, with keys for "name:, :label", and "placeholder" if you want more control. |
|
| label |
option |
(string) |
If provided, this will be used as the display for the option instead of the default display text once the related selects are created. |
|
| parents |
option |
(see description) |
This is a list of the parent levels in the hierarchy, separated by the delimiter. Alternately, you can use a JSON object with a key for each parent level and the value for that parent. This ultimately just sets values in the data-selectgroup attributes (see below). |
|
| gated |
(controller) |
false | (boolea) |
If true, child selects will be hidden until a value is selected in the parent select. |
| (parent name) |
option |
(see description) |
For each parent level, you can set the value for that parent directly using a data attribute named for the parent. For example, if you have a parent named "Nation", you can set the value for that parent using data-selectgroup-nation="USA". This ultimately just sets values in the data-selectgroup-parents attribute (see above). |