Foundation-select

jQuery plugin for custom select inputs in Zurb Foundation 5 using Foundation Dropdowns plugin

View the Project on GitHub

How To

Setting up custom <select>s with Foundation using foundation-select.js is relatively easy.

Step 1

Include foundation-select.css in your <head>

Step 2

Include foundation-select.js before your </body>

Step 3

Include $('select').foundationSelect(); before $(document).foundation();

Examples

Single selection <select>

<select id="single-bsg-pilot">
  <option value="husker">Husker</option>
  <option value="starbuck" selected>Starbuck</option>
  <option value="hotdog">Hot Dog</option>
  <option value="apollo">Apollo</option>
</select>

Single selection <select> with prompt

<select id="single-bsg-pilot-prompt" data-prompt="Choose the best BSG pilot">
  <option value="husker">Husker</option>
  <option value="starbuck">Starbuck</option>
  <option value="hotdog">Hot Dog</option>
  <option value="apollo">Apollo</option>
</select>

Multiple selection <select> with prompt

<select id="multiple-bsg-pilots" multiple data-prompt="Choose the top BSG pilots">
  <option value="husker">Husker</option>
  <option value="starbuck">Starbuck</option>
  <option value="hotdog">Hot Dog</option>
  <option value="apollo">Apollo</option>
</select>