Micro Select

Here we go, an easy to use Select-Replacement. Just fire up the old JQuery and get a nice Selectbox.


Demo
Try it here

Usage
The Html:

var microSelectOptions = {
    size: 5
   }
     google.load("jquery", "1.4.1");
    
     google.setOnLoadCallback(function() {
    $('.microselect').microSelect(microSelectOptions);
    $('.microselectExpand').microSelect({expand: true});
     });

Note that the options must be defined outside the document.ready (or it's google aequivalent) so it can be reachable by the buttons.

<div>
   <select id="myMicroSelect" class="microselect">
    <option value="lagwagon">Lagwagon</option>
      <option value="avail">Avail</option>
      <option value="nofx">NOFX</option>
      <option value="wizo">WIZO</option>
      <option value="propagandhi">Propagandhi</option>
      <option value="nouseforaname">No Use For a Name</option>
      <option value="descendents">Descendents</option>
      <option value="mxpx">MxPx</option>
   </select>
  </div>
  <br />
  <button onClick="$.fn.microSelect.add($('#myMicroSelect'), 'The Soviettes', 'thesoviettes', microSelectOptions);">Add</button>
  <button onClick="$.fn.microSelect.remove($('#myMicroSelect'), 'nofx', microSelectOptions);">Remove</button>
  <button onClick="alert($.fn.microSelect.getSelected($('#myMicroSelect')));">Get Selected</button>

Options

{
    title: 'Hover here to select',
    size: 5,
    checkboxes: false,
    multiple: true,
    expand: false,
    cssClassTitle: 'micro-select-title',
    cssClassSelected: 'micro-selected',
    cssClassUnselected: 'micro-unselected',
    cssClassHoverSelected: 'micro-hover-selected',
    cssClassHoverUnselected: 'micro-hover-unselected'
}

Download
Download Here