Missouri State University Pattern Library

Multi-select

No notes defined.

<div class="ou-form">
    <div id="div_loremipsumdolor" class="form-group">
        <label class="control-label" for="id_loremipsumdolor">Lorem ipsum dolor sit amet consectetur
        </label> <select id="id_loremipsumdolor" name="loremipsumdolor" multiple size="10" class="form-control">
            <option value="Option number one">Option number one</option>
            <option value="Option number two">Option number two</option>
            <option value="Option number three">Option number three</option>
            <option value="Option number four">Option number four</option>
            <option value="Option number five">Option number five</option>
            <option value="Option number six">Option number six</option>
            <option value="Option number seven">Option number seven</option>
            <option value="Option number eight">Option number eight</option>
            <option value="Option number nine">Option number nine</option>
            <option value="Option number ten">Option number ten</option>
        </select>
    </div>

</div>
 
{{#> @mc-control-wrapper}}
  {{#*inline 'container'}}
    <div id="div_{{name}}" class="form-group">
      {{> @mc-label}}
      <select id="id_{{name}}" name="{{name}}" multiple size="10" class="form-control">
        {{#> control}}
            {{#each group}}
            {{#if label}}
        <optgroup label="{{label}}">
            {{/if}}
            {{#each control}}
            <option value="{{value}}"{{#if selected}} selected{{/if}}>{{option}}</option>
            {{/each}}
            {{#if label}}
        </optgroup>
            {{/if}}
            {{/each}}
            {{/control}}
        </select>
    </div>
  {{/inline}}
{{/@mc-control-wrapper}}
 
{
  "pageId": 1,
  "label": "Lorem ipsum dolor sit amet consectetur",
  "name": "loremipsumdolor"
}