Menu

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 select with the class "dynMultiSelect-options". This element should contain the options available to be selected. These options may be generated dynamically as shown in the example.            
  • A select with the class "dynMultiSelect-selected". This element can be empty, as it is to contain selected options.            
  • A button with the class "dynMultiSelect-add". Pressing this button moves the currently selected option in the container of available options into the container of selected options.            
  • A button with the class "dynMultiSelect-remove". Pressing this button moves the currently selected option in the container of selected options into the container of available options.                          
  • (Optional) A button with the class "dynMultiSelect-up". Pressing this button moves the currently selected option in the container of selected options up one step.            
  • (Optional) A button with the class "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> 

Comments

0 comments