jGD DropDown

About jGD DropDown

jGD DropDown is first plugin for jQuery by Dev4Press. Styling normal select box control is almost impossible, and whatever you do with it, each browser will display it differently. In many cases where you need this control to blend in with the rest of the controls, the only way to do it is to replace it.

This plugin will replace select control with combination of DD/DT/UL/LI controls that can easily be styled to look the way you need it, and in the same time your select control will remain connected to this new dropdown, and when you change value in the dropdown, it will be changed in select box also. DropDown supports different options, but it’s meant to be used with normal select box, so the multiple attribute in select box will be ignored. Only one value can be selected.

Setup

Add these two lines to your page (header). Before that you need to load jQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jgd.dropdown.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jgd.dropdown.min.css" media="screen" />

Paths to the files depend on the structure of your website or project.

Markup

Any select tag will do. If it is set to multiple, that attribute will be ignored. You can add ID and/or NAME for that tag so that you can identify it easier, but from the DropDown point of view, it’s not required.

Basic Usage

<script type="text/javascript">
$(document).ready(function() {
$("select").jgdDropdown();
}
</script>

With this code, all select tags on the page will be transformed to dropdowns. Since plugin is extension to jQuery, you can use any selector to find exactly the element to convert with class or id.

Usage with options

Plugin supports several settings:

• callback: function to call when the selection has changed, it will send select object and selected value to the function.
• cls: class to use for the newly created dropdown, determining the styling for the control.
• initTitle: title for initial display of drop down if no selected value is passed to the plugin.
• forceTitle: force displaying the title even if there is a selected value in the plugin.
• selected: value of the selected element, it will override the selection of the select control.
• clsLIPrefix: prefix for value classes on LI elements. Default is empty.
• clsLISelected: class to add to selected element in the drop down.
• clsCopySelect: copy classes from selected elements to top level title element.
• clsLIExpand: add auto generated classes: odd/even, numbered, first/last. Default is true.

<script type="text/javascript">
$(document).ready(function() {
$("select#jgdsel").jgdDropdown({
callback: function(obj, val) { alert(val); }
});
$("select#jgdsel2").jgdDropdown({
callback: function(obj, val) { alert(val); },
cls: 'jgd-dropdown'
}); }
</script>