Sandbox: JavaScript

Warning: Built for Flat-UI

This component has no direct correlary to vanilla Bootstrap. The styling here depends on Flat-UI.

Plugin dependency

Note: Be sure to include thanx-components/select.less so that your original select elements that use this behavior are hidden.

Vanilla Select

example inputs shown to demo tabbing around

<div class="row">
  <div class="form-group clearfix">
    <div class="col-lg-5"><input name="a" class="form-control"></div>
  </div>
</div>
<div class="row">
  <div class="form-group col-lg-5 clearfix">
    <select data-behavior="FlatUI.Select" class="select-block mbl">
        <option value="0" selected="selected">My Profile</option>
        <option value="1">My Friends</option>
        <option value="2">Messages</option>
        <option value="3">My Settings</option>
        <option value="4">Logout</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="form-group clearfix">
    <div class="col-lg-5"><input name="a" class="form-control"></div>
  </div>
</div>

With Sections

<select data-behavior="FlatUI.Select" class="select-block mbl">
  <optgroup label="Profile">
    <option value="0" selected="selected">My Profile</option>
    <option value="1">My Friends</option>
  </optgroup>
  <optgroup label="System">
    <option value="2">Messages</option>
    <option value="3">My Settings</option>
    <option value="4" class="highlighted">Logout</option>
  </optgroup>
</select>

With Custom Styles

<select data-behavior="FlatUI.Select" class="mbl" data-flatui-select-options="
  'buttonClass': 'btn btn-warning',
  'menuClass': 'dropdown-inverse',
  'arrowClass': 'dropdown-arrow dropdown-arrow-inverse'
">
  <optgroup label="Profile">
    <option value="0" selected="selected">My Profile</option>
    <option value="1">My Friends</option>
  </optgroup>
  <optgroup label="System">
    <option value="2">Messages</option>
    <option value="3">My Settings</option>
    <option value="4" class="highlighted">Logout</option>
  </optgroup>
</select>

With a Highlighted Element and a Disabled Element

<select data-behavior="FlatUI.Select" class="select-block mbl" multiple="true">
    <option value="0" selected="selected">My Profile</option>
    <option value="1">My Friends</option>
    <option value="2" disabled="true">Messages (this is disabled with the attribute disabled='true')</option>
    <option value="3" class="disabled">My Settings (this is disabled with the 'disabled' css class)</option>
    <option value="4" class="highlighted">Logout (this option has a custom class - 'highlighted')</option>
</select>

Multiple Selection

<select data-behavior="FlatUI.Select" class="select-block mbl" multiple="true">
    <option value="0" selected="selected">My Profile</option>
    <option value="1">My Friends</option>
    <option value="2">Messages</option>
    <option value="3">My Settings</option>
    <option value="4">Logout</option>
</select>

Disabled

<select data-behavior="FlatUI.Select" class="select-block mbl" multiple="true" disabled="true">
    <option value="0" selected="selected">My Profile</option>
    <option value="1">My Friends</option>
    <option value="2" class="divider">Messages</option>
    <option value="3">My Settings</option>
    <option value="4">Logout</option>
</select>

Change On Submit

The select list is built with DOM elements. When you make a selection, this plugin updates the actual select list and fires it's change event. Because the manual fireEvent method on elements doesn't actually bubble up like a native event, this means it doesn't work with delegation (and hence, not with the triggers registered with Delegator). If you want to submit a form with one of these select elements, you have to put the trigger on the element. You still need to put this trigger on the form itself if you want other native inputs to update the form on change.

Select some text to update the box below.

this box should get new text when you change the input above.
<form id="test"
    data-behavior="FormRequest"
    data-trigger="submitOnChange"
    data-formrequest-update="!body #update"
    data-submitonchange-options="
      'onlyOnce': false
    "
    action="/sandbox/echo_html"
    method="get">
    <p>Select some text to update the box below.</p>
    <div class="form-group">
      <select name="html" data-behavior="FlatUI.Select" data-trigger="submitOnChange"
              data-submitonchange-options="
                'onlyOnce': false,
                'target': '!form'
              "
              class="select-block mbl">
          <option>This is some text.</option>
          <option>Hey, this is some other text.</option>
          <option>Yet more text.</option>
          <option>Neato, even more text.</option>
          <option>Ok, we're done here.</option>
      </select>
    </div>
  </form>

  <div id="update" class="box">
    this box should get new text when you change the input above.
  </div>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
menuClass String ~ Class applied to the dropdown menu. E.g. 'dropdown-inverse'.
buttonClass String 'btn-hg btn-primary' Classes applied to the button that the user clicks to show the dropdown.
noneSelectedText String 'Nothing selected' String displayed in the button when the user has nothing selected. Only applies when the select element has multiple="true".
closeOnEsc Boolean true Closes the dropdown when the user hits escape.

Additional Notes

  • The classes on the select list are transfered to the container for the HTML implementation. For example, if you were to give this a class that specified width, it would apply.
  • If your select is disabled the HTML UI will also be. If you need to toggle this, you need to run yourSelectElement.get('select').disable() / .enable().
  • The select element is hidden by JavaScript, but this can cause a flicker on load. You should include thanx-components/select.less which hides them via CSS.
  • You can disable individual options by giving the option the class 'disabled'

Automatic Behavior

If your JS build includes FlatUI.js, all select boxes get turned into these components. You can prevent this by adding the css class no-flat-select to the element.

Here's an example of a plain ol' select list element.

<select>
    <option value="0" selected="selected">My Profile</option>
    <option value="1">My Friends</option>
    <option value="2">Messages</option>
    <option value="3">My Settings</option>
    <option value="4">Logout</option>
</select>