Styled Dropdown

current release: v1.0

How it works - $(selector).styledDropdown({options});

The benefits of using the styledDropdown jQuery plugin to progressively enhance an select element into a manageable ul list element. This method offers a fail-safe degradation back to a normal select element in case the user can't render the styled ul. The "selected" value(s), like in a normal select element, is appended as a hidden element holding the name of the original select element and it's selected value(s).

Call $(selector).styledDropdown(options) on any select element. {options} are optional and defined in JSON. They extend the functionality of the plugin as follows:

Styled Dropdown Properties
Arguments Type Description
attrsToCopy array An array of attributes to copy from one element to the other. Default: ['title', 'name', 'class']. NOTE: this may produce invalid XHTML in order to carry select element properties to the enhanced list.
onClickCallback function A callback function to run on select click.
onChangeCallback function A callback function to run after selected changes.
callback function A callback function to run after the plugin finishes converting the select element. Great for adding ul effects.
debug boolean run in debug mode.

Setup

Include Dependencies

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/styledDropdown.jquery.js"></script>

Call $().styledDropdown() on elements when DOM is ready

<script>
$(function(){
  $('select').styledDropdown();
});
</script>

Examples

Sample HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rel Copy Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/styledDropdown.jquery.js"></script>
<script>
$(function(){
   $('#select').styledDropdown();
});
</script>
{...}
</head>
<body>
<p>Sort by
  <select id="select" onchange="console.log(this.value)" name="sortby">
<option selected="selected" value="relevance">Relevance</option>
<option value="lowToHigh">Price: Low to High</option>
<option value="highToLow">Price: High to Low</option>
<option value="descriptionAZ">Description: A to Z</option>
<option value="descriptionZA">Description: Z to A</option>
<option value="topRated">Top Rated</option>
</select>
</p>

</body>
</html>

StyledDropdown recodes the above highlighted code as follows. Use this format to appropriately apply CSS styles:

<p>Sort by 
<dl id="select" class="select" value="relevance" name="sortby"> <dd class="selected option" value="relevance">Relevance</dd> <dd class="option" value="lowToHigh">Price: Low to High</dd> <dd class="option" value="highToLow">Price: High to Low</dd> <dd class="option" value="descriptionAZ">Description: A to Z</dd> <dd class="option" value="descriptionZA">Description: Z to A</dd> <dd class="option" value="topRated">Top Rated</dd> </dl> </p> <style> dl.select {border:1px solid #666;position:relative; max-height:1.25em; width:160px; -moz-border-radius:3px;} dl.select dt {text-indent:5px} dl.select dt a {text-decoration:none;} dl.select dd {width:160px; display:none; margin:0; background:#fff; border-left:1px solid #666; border-right:1px solid #666;} dl.select dd:last-child {border-bottom:1px solid #ccc;} dl.select dd:hover {background:#eee; } dl.select.hover dd {display:block;} dl.select dd a {text-decoration:none;} dl.select dd a:hover { background:#eee;} </style>

Basic Example

JavaScript

$("#select").styledDropdown();

Sort by

Overflow Example - Using A Callback function

JavaScript - This creates non W3C complient markup

$("#select2").styledDropdown({
callback:function(e){
$(e).find('dd').wrapAll("<div class='overflow' />");
}
});

CSS

<style>
dl.select2 {border:1px solid #666;position:absolute; max-height:1.25em; width:160px;}
dl.select2 dt {text-indent:5px}
dl.select2 dt a {text-decoration:none;}
dl.select2 dd {display:none; margin:0; background:#fff; padding-left:3px;}
dl.select2 dd:hover {background:#eee;}
dl.select2.hover dd {display:block;}
dl.select2 dd a {text-decoration:none;}
dl.select2 dd a:hover {background:#eee;}
dl.select2.hover .overflow { overflow:scroll; overflow-x:hidden; position:relative; left:-1px; margin-top:0px; border:1px solid #666; height:100px; width:100%;} </style>

Sort by

Latest Source

Changelog

Documentation was last modified on 25 October 2011 at 11:51 PM
26.08.2011 Version 1.0
Added functionality that closes the dropdown when user clicks outside the dropdown.
1.06.2010 Version 0.1.0
Initial Release.