Select Menus

Class Attribute Order

The order of the classes as defined in the class attribute should be as follows: Size, Width, Icon, JavaScript Related Class. JavaScript Related Class must be prefixed with js-

Select Menu Sizes

HTML

<select class="select-small"> 
    <option>Charlie Brown</option>
    <option>Linus</option>
    <option>Lucy</option>
    <option>Pigpen</option>
    <option>Peppermint Patty</option>
    <option>Snoopy</option>
    <option>Linus: Oh oh! Lucy's got her mad face on! No matter what I do or say today I'm
    going to get slugged. I might as well get it over with.</option>
</select>

<select class="select-default"> 
    <option>Charlie Brown</option>
    <option>Linus</option>
    <option>Lucy</option>
    <option>Pigpen</option>
    <option>Peppermint Patty</option>
    <option>Snoopy</option>
    <option>Linus: Oh oh! Lucy's got her mad face on! No matter what I do or say today I'm
    going to get slugged. I might as well get it over with.</option>
</select>

<select class="select-large"> 
    <option>Charlie Brown</option>
    <option>Linus</option>
    <option>Lucy</option>
    <option>Pigpen</option>
    <option>Peppermint Patty</option>
    <option>Snoopy</option>
    <option>Linus: Oh oh! Lucy's got her mad face on! No matter what I do or say today I'm
    going to get slugged. I might as well get it over with.</option>
</select>

<select class="select-jumbo"> 
    <option>Charlie Brown</option>
    <option>Linus</option>
    <option>Lucy</option>
    <option>Pigpen</option>
    <option>Peppermint Patty</option>
    <option>Snoopy</option>
    <option>Linus: Oh oh! Lucy's got her mad face on! No matter what I do or say today I'm
    going to get slugged. I might as well get it over with.</option>
</select>

Select Menu Widths

By default, when the select menu doesn't have a class, it will be as large as the longest option.

HTML

<select class="select-default select-shorter"> 
    <option>123</option>
    <option>567</option>
    <option>910</option>
    <option>234</option>
</select>

<select class="select-default select-short"> 
    <option>About Ten</option>
    <option>Characters</option>
    <option>Comfortably</option>
    <option>Fit Here</option>
</select>

<select class="select-default select-medium"> 
    <option>Charlie Brown</option>
    <option>Linus</option>
    <option>Lucy</option>
    <option>Pigpen</option>
    <option>Peppermint Patty</option>
    <option>Snoopy</option>
    <option>Linus: Oh oh! Lucy's got her mad face on! No matter what I do or say today I'm
    going to get slugged. I might as well get it over with.</option>
</select>

<select class="select-default select-long"> 
    <option>Charlie Brown</option>
    <option>Linus</option>
    <option>Lucy</option>
    <option>Pigpen</option>
    <option>Peppermint Patty</option>
    <option>Snoopy</option>
    <option>Linus: Oh oh! Lucy's got her mad face on! No matter what I do or say today I'm
    going to get slugged. I might as well get it over with.</option>
</select>

<select class="select-default select-longer"> 
    <option>Charlie Brown</option>
    <option>Linus</option>
    <option>Lucy</option>
    <option>Pigpen</option>
    <option>Peppermint Patty</option>
    <option>Snoopy</option>
    <option>Linus: Oh oh! Lucy's got her mad face on! No matter what I do or say today I'm
    going to get slugged. I might as well get it over with.</option>
</select>

<select class="select-default select-wide-full"> 
    <option>Charlie Brown</option>
    <option>Linus</option>
    <option>Lucy</option>
    <option>Pigpen</option>
    <option>Peppermint Patty</option>
    <option>Snoopy</option>
    <option>Linus: Oh oh! Lucy's got her mad face on! No matter what I do or say today I'm
    going to get slugged. I might as well get it over with.</option>
</select>

Multi-Select (jQuery UI)

(Documentation)

HTML

<select class="jqueryui-multiselect"> 
  <option>Charlie Brown</option> 
  <option>Linus</option> 
  <option>Lucy</option> 
  <option>Pigpen</option> 
  <option>Peppermint Patty</option> 
  <option>Snoopy</option> 
</select>

JS (in jsinc/script.js)

$(function () {
  $(".jqueryui-multiselect").multiselect();
});

Combo Box (jQuery UI)

A jQuery ui plugin that combines text input with a dropdown; it breaks down each option per letter and allows the results to be filtered as the user types. (Documentation)

HTML

<select class="dropdown-combobox"> 
  <option>Charlie Brown</option> 
  <option>Linus</option> 
  <option>Lucy</option> 
  <option>Pigpen</option> 
  <option>Peppermint Patty</option> 
  <option>Snoopy</option> 
</select>

JS (in jsinc/script.js)

$(function () {
  $(".dropdown-combobox").combobox();
  $("#toggle").on("click", function () {
    $(".dropdown-combobox").toggle();
  });
});

Custom Select Menu

Seen in Global User Search and new Shop Pages.

This plugin takes a select menu and transforms it into a stylable unordered list.

Currently it has two options, "hover" and "sort" which are both false by default.

Hover: expands the select on hover, instead of click (which is default)

Sort: brings the currently selected menu item to the top of the <ul> and sorts the rest of the items alphabetically

HTML

<select id="example1"> 
  [...]
</select>

<select id="example2"> 
  [...]
</select>

JS (in jsinc/script.js)

$(function () {
  $("#example1").createCustomDropdown();
  $("#example1").createCustomDropdown({hover:true, sort:true});
});