Select

<select id="select-example" name="select-example" tabindex="0" >
      <option value="1">An option - number 1</option>
      <option value="2">An option - number 2</option>
      <option value="3">An option - number 3</option>
</select>
<select id="select-example-enhanced" name="select-example-enhanced" data-js="enhance-select" tabindex="1" >
      <option value="1">An option - number 1</option>
      <option value="2">An option - number 2</option>
      <option value="3">An option - number 3</option>
</select>
<select id="select-example-boxed-enhanced" name="select-example-boxed-enhanced" data-js="enhance-select" tabindex="2" class="enhanced-select--box">
      <option value="1">An option - number 1</option>
      <option value="2">An option - number 2</option>
      <option value="3">An option - number 3</option>
</select>
<select id="select-example-boxed-enhanced" name="select-example-boxed-enhanced" data-js="enhance-select" disabled="" tabindex="3" class="enhanced-select--box">
      <option value="1">An option - number 1</option>
      <option value="2">An option - number 2</option>
      <option value="3">An option - number 3</option>
</select>

This component is now deprecated and will be removed/refactored in v3.0.0 

  <p class="notice notice--error">
    This component is now deprecated and will be removed/refactored in v3.0.0
  </p>
<select id="select-example-filter" name="select-example-filter" data-js="enhance-select" data-select-filter="true" tabindex="4" >
      <option value="1">ZAR - Rands</option>
      <option value="2">ZRR - Randy Rands</option>
      <option value="3">ZIR - Royals</option>
      <option value="4">GBP - Pound Sterling</option>
      <option value="5">GBP - Pound Jerkling</option>
      <option value="6">GBP - Dog Pound</option>
      <option value="7">GAP - Pounded Clothes</option>
</select>

This component is now deprecated and will be removed/refactored in v3.0.0 

  <p class="notice notice--error">
    This component is now deprecated and will be removed/refactored in v3.0.0
  </p>
<select id="select-example-filter-2" name="select-example-filter-2" data-js="enhance-select" data-select-filter="true" tabindex="5" >
      <optgroup label="Recent currencies">
          <option value="1" data-display="ZAR">ZAR - Rands</option>
          <option value="2" data-display="ZRR">ZRR - Randy Rands</option>
          <option value="3" data-display="ZIR">ZIR - Royals</option>
      </optgroup>
      <optgroup label="All currencies">
          <option value="1" data-display="ZAR">ZAR - Rands</option>
          <option value="2" data-display="ZRR">ZRR - Randy Rands</option>
          <option value="3" data-display="ZIR">ZIR - Royals</option>
          <option value="4" data-display="GBP">GBP - Pound Sterling</option>
          <option value="5" data-display="GBJ">GBP - Pound Jerkling</option>
          <option value="6" data-display="DP">GBP - Dog Pound</option>
          <option value="7" data-display="GAP">GAP - Pounded Clothes</option>
      </optgroup>
</select>

Introduction

A default <select> element that can be enhanced with JavaScript to allow for both custom styling and an input bar to filter options.

Source files

Markup
src/html/components/select.hbs
Styling
src/styles/components/elements/_select.scss
Script
src/scripts/modules/jquery.pfSelect.js

Usage

JavaScript hooks/values Effect Required
data-js=enhance-select Placed on any select that you want to be enhanced with custom styling. Optional
data-select-filter=true Placed on any [data-js=enhance-select] element to include a filter input bar. Optional
data-select-filter=true Placed on any [data-js=enhance-select] element to include a filter input bar. Optional
data-display=[DISPLAY-TEXT] Placed on any option element where you want the selected text to be different to the text shown in the dropdown. Optional
.enhanced-select--box When placed on the select element will render a boxed select element. Optional
[disabled] Adding this attribute to the select will disable the select and add a .enhanded-select--disabled class to the wrapper. Optional