This is a fantastic jQuery select box plugin. It looks really nice and mimics any browser selectbox behaviour including multiple select and opt groups. Very simple to implement and setup the options and it's also pretty easy to customize the look and feel in the css file. It's also very simple to get and set values by using the the "value" key. A fantastic plugin to have in your arsenal for customizing the look and feel of your website.
This plugin was build on top of the jQuery UI framework which is why you might recognize the look and feel of it. It's pretty easy to implement and since it's part of the ui library you automatically get access to all the available jquery ui themes. It supports multiselect and you can also set it up for a simple generic select and has a ton of options and events you can setup. They probably could have made setting and getting the values in the select boxes easier, but all in all a great plugin, especially if you are already using the jQuery ui library and it's themes.
<link rel="stylesheet" type="text/css" href="/a/plugins/select-boxes/jquery/jquery-ui-multiselect/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/a/plugins/select-boxes/jquery/jquery-ui-multiselect/src/jquery.multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#jqueryUI1").multiselect();
$("#jqueryUI1_get").click(function(){
$("#jqueryUI1_value").html($("#jqueryUI1").val() ? $("#jqueryUI1").val().join(",") : "no value selected");
});
$("#jqueryUI1_set").click(function(){
<!-- make sure you use the each iterator and not just .click() -->
$($("#jqueryUI1").multiselect("widget").find(":checkbox").get(3)).each(function(){
this.click();
});
});
});
</script>
<select id="jqueryUI1" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
</select>
<br/><br/>
<span id="jqueryUI1_set" style="cursor:pointer;">set</span> |
<span id="jqueryUI1_get" style="cursor:pointer;">get</span>: <span id="jqueryUI1_value"></span>
generic dropdown •
animations •
set |
get:
<link rel="stylesheet" type="text/css" href="/a/plugins/select-boxes/jquery/jquery-ui-multiselect/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/a/plugins/select-boxes/jquery/jquery-ui-multiselect/src/jquery.multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#jqueryUI2").multiselect({
multiple: false,
header: false,
noneSelectedText: "Select An Option",
selectedList: 1,
show: ["bounce", 200]
});
$("#jqueryUI2_get").click(function(){
$("#jqueryUI2_value").html($("#jqueryUI2").val() ? $("#jqueryUI2").val().join(",") : "no value selected");
});
$("#jqueryUI2_set").click(function(){
<!-- make sure you use the each iterator and not just .click() -->
$($("#jqueryUI2").multiselect("widget").find(":radio").get(3)).each(function(){
this.click();
});
});
});
</script>
<select id="jqueryUI2" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
</select>
<br/><br/>
<span id="jqueryUI2_set" style="cursor:pointer;">set</span> |
<span id="jqueryUI2_get" style="cursor:pointer;">get</span>: <span id="jqueryUI2_value"></span>
3. Image Dropdown
This is a neat little jQuery select box plugin that converts the standard browser box to an image based one. It doesn't support too many options out of the box, but it does allow you to pull and set values like a normal select box. It would be nice to see something a little more simplified also more skins out of the box rather than having to roll your own. Overall a cool plugin that works well and doesn't require much effort to extend for your personal needs.
Descent little select box / dropdown plugin that allows sub menus. You can also type to find specific values which was pretty cool. Would like to see some better skinning of it though, but the code is pretty good and it worked well out of the box. Getting and setting values is pretty easy, overall a nice little jQuery plugin.
