$(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:
| 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. |
<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>
$().styledDropdown() on elements when DOM is ready
<script>
$(function(){
$('select').styledDropdown();
});
</script>
<!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>
$("#select").styledDropdown();
Sort by
$("#select2").styledDropdown({
callback:function(e){
$(e).find('dd').wrapAll("<div class='overflow' />");
}
});
<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