JQuery Dropdown is a cross-browser JQuery plugin allowing the creation of select boxes with images. It has advanced configuration options, which allow functions to be executed on selection change or click, as well as great methods interface, allowing dynamic change of selection, and getting the selected value as text.
Demo
Features
Easy Integration. Takes no exaustive coding to install. Copy an example from the guide bellow and paste.
Multiple Browser Support. The JQuery Dropdown plugin has been tested and is working fine in Mozilla Firefox, Internet Explorer 6.0, Opera, Safari and Netscape Navigator.
Small Size. With the size of 4kb JQuery Dropdown is a must have for every JQuery developer.
Highly Configurable. JQuery Dropdown can be easily configured to match your needs.
Installation
To use the JQuery Dropdown plugin, include the jQuery library and the Dropdown plugin inside the <head> tag of your HTML document.
$(document).ready(function(){
// Set the width to match the background image
$("#languages").width(172).dropdown();
});
Advanced Options
You can further set up the JQuery Dropdown plugin with options, that suit your application best.
$(document).ready(function(){
var lang = $("#languages").width(172).dropdown({
width:172, height:28,
// Customize dropdown image
image:"dropdown.gif",
// Customize mouse over color
mouseovercolor:"silver",
// Customize mouse out color
mouseoutcolor:"white",
// A custom function to be executed on value changed
change:function(value){"Value changed to:"+alert(value)},
// A custom function to be executed on dropdown option clicked
click:function(value){"Value clicked:"alert(value)}
});
});
Available Methods
Currently the JQuery Dropdown plugin supports two methods - value and select.
$(document).ready(function(){
// Initiating the dropdown
var lang = $("#languages").width(172).dropdown();
// Specify which option is to be selected by index, 0 is selected by default
lang.select(1);
// Specify which option is to be selected by value,
// if the value exists it will be selected
lang.select("Italian");
// Get the currently selected value
alert(lang.value());
});
License
Dropdown version 1.2 (01.04.2009)
Copyright(c)2009 Remiya Solutions All Rights Reserved
Website: http://remiya.com
This script may be used for both free and commercial purposes only
if the following conditions are met:
1. A link back to the author's website is provided on the website,
where the script is being used.
2. You are hereby licensed to make as many copies of this script
as you need in order to distribute your own work (including
for commercial use). You are specifically prohibited from
charging, or requesting donations, for any such copies
without prior written permission.
3. You ARE NOT allowed to distribute for download the script via
electronic means (Internet, e-mail, etc). This means that
this software is to be available to download from the official
website (http://remiya.com) ONLY.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.
Download
I have read and fully understand the license agreement.