multi-select
An HTML content command that adds functionality to a specific kind of HTML structure within it, resulting in a selection component that presents available and selected options in their own containers, with buttons to move the options around.
This command requires certain HTML elements to exist within it. These are as follows:
A
selectwith theclass"dynMultiSelect-options". This element should contain the options available to be selected. These options may be generated dynamically as shown in the example.A
selectwith theclass"dynMultiSelect-selected". This element can be empty, as it is to contain selected options.A
buttonwith theclass"dynMultiSelect-add". Pressing this button moves the currently selected option in the container of available options into the container of selected options.A
buttonwith theclass"dynMultiSelect-remove". Pressing this button moves the currently selected option in the container of selected options into the container of available options.(Optional) A
buttonwith theclass"dynMultiSelect-up". Pressing this button moves the currently selected option in the container of selected options up one step.(Optional) A
buttonwith theclass"dynMultiSelect-down". Pressing this button moves the currently selected option in the container of selected options down one step.
The specified elements may exist anywhere within the command's element - they can, for example, be placed inside a table. If any of the four required elements is missing, the command reports it as an error.
The variable value that this component produces when the form is submitted is a Collection of Strings, with every String being the value of a selected option's value attribute.
Attributes
name | ||
|---|---|---|
Required | Value type | EL-evaluated |
Yes | String | No |
Defines the name of the variable that will hold the Collection of selected options' values. | ||
Examples
A table-based multi-select structure:
<dyn-multi-select name="selectedOptions"><table><tr><td><select class="dynMultiSelect-options" size="10"><option dyn-repeat="options" dyn-repeat-var="var" dyn-value="var.Id" dyn-content="var.Name"/></select></td><td><button class="dynMultiSelect-add">Add</button> <br/><button class="dynMultiSelect-remove">Remove</button></td><td><select class="dynMultiSelect-selected" size="10"></select></td></tr><tr><td></td><td></td><td><button class="dynMultiSelect-up">Up</button><button class="dynMultiSelect-down">Down</button></td></tr></table></dyn-multi-select>