Select elements

A SelectFormElement writes a <select> tag to the output. For more information about the OptionsFormElementBuilder see the options section.

Element and builder

The SelectFormElement implementation has an equivalent OptionsFormElementBuilder. A builder can be created using the BootstrapUiBuilders.options().select() factory method.

Examples

Single select

Given the following builder configuration:

BootstrapUiBuilders.options()
  .select()
  .controlName( "controlName" )
  .name( "internalName" )
  .readonly( false )
  .add( BootstrapUiBuilders.option().value( "one" ).text( "Inner text" ) )
  .add( BootstrapUiBuilders.option().value( "twoe" ).text( "Second text" ) )
  .build();

The following markup would be rendered:

<select name="controlName" id="controlName" data-ax-dev-view-element="internalName" class="form-control">
   <option id="controlName1" value="one">Inner text</option>
   <option id="controlName2" value="two">Inner text 2</option>
</select>

Multiple select with optionGroups

Given the following builder configuration:

SelectFormElement.OptionGroup group = new SelectFormElement.OptionGroup();
group.setLabel( "Group label" );
group.addChild(BootstrapUiBuilders.option().value( "two" ).text( "Inner text 2" ).build());
group.addChild(BootstrapUiBuilders.option()value( "Short two" )text( "Some text" ).build());

return BootstrapUiBuilders.options()
  .select()
  .add( group )
  .multiple( true )
  .controlName( "controlName" )
  .name( "internalName" )
  .readonly( false )
  .build();

The following markup would be rendered:

<select name="controlName" multiple="multiple" id="controlName3" data-ax-dev-view-element="internalName" class="form-control">
   <optgroup label="Group label">
      <option value="two">Inner text 2</option>
      <option value="Short two">Some text</option>
   </optgroup>
</select>

Bootstrap-Select

If you want to create a more advanced bootstrap-select dropdown instead of a simple HTML select, you can do so by specifying a SelectFormElementConfiguration object. See the respective javadoc for all configuration properties.

Message codes

The SelectFormElementConfiguration allows you to configure the default text for the control. These properties support message code text snippets which will be replaced if a SelectFormElement is built using the OptionsFormElementBuilder.

The following default message codes are used:

Property Message code Default text

selectAllText

BootstrapUiModule.SelectFormElementConfiguration.selectAllText

Select all

noneSelectedText

BootstrapUiModule.SelectFormElementConfiguration.noneSelectedText

Nothing selected

maxOptionsText

BootstrapUiModule.SelectFormElementConfiguration.maxOptionsText

Limit reached ({0} items max)

countSelectedText

BootstrapUiModule.SelectFormElementConfiguration.countSelectedText

{0} items selected

deselectAllText

BootstrapUiModule.SelectFormElementConfiguration.countSelectedText

Deselect all
Message code replacement is performed when SelectFormElementConfiguration.localize() is called. This is done automatically when using an OptionsFormElementBuilder.

Given the following builder configuration

BootstrapUiBuilders
    .options()
    .select( SelectFormElementConfiguration.simple() )
    .multiple()
    .controlName( "boxName" )
    .add( BootstrapUiBuilders.option().label( "Orange" ).value( "orange" ) )
    .add( BootstrapUiBuilders.option().label( "Apple" ).value( "apple" ) )
    .build();

The following markup would be rendered:

<div class="btn-group bootstrap-select show-tick form-control">
   <button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown" role="button" data-id="boxName" title="Nothing selected"><span class="filter-option pull-left">Nothing selected</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
   <div class="dropdown-menu open" role="combobox">
      <ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
         <li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Orange</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
         <li data-original-index="1"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Apple</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      </ul>
   </div>
   <select data-bootstrapui-select="{&quot;countSelectedText&quot;:&quot;{0} items selected&quot;,&quot;deselectAllText&quot;:&quot;Deselect all&quot;,&quot;dropupAuto&quot;:false,&quot;maxOptionsText&quot;:&quot;Limit reached ({0} items max)&quot;,&quot;noneSelectedText&quot;:&quot;Nothing selected&quot;,&quot;selectAllText&quot;:&quot;Select all&quot;,&quot;selectOnTab&quot;:true}" name="boxName" multiple="multiple" id="boxName" class="form-control" tabindex="-98">
      <option id="boxName1" value="orange">Orange</option>
      <option id="boxName2" value="apple">Apple</option>
   </select>
</div>
« Radio button Select Textbox »