<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Steve Reynolds Blog &#187; Combo</title>
	<atom:link href="http://www.reynoldsftw.com/tag/combo/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.reynoldsftw.com</link>
	<description>Being Generalist.</description>
	<lastBuildDate>Wed, 28 Jul 2010 20:36:11 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>11 jQuery Plugins to Enhance HTML Dropdowns</title>
		<link>http://www.reynoldsftw.com/2009/03/11-jquery-plugins-to-enhance-html-dropdowns/</link>
		<comments>http://www.reynoldsftw.com/2009/03/11-jquery-plugins-to-enhance-html-dropdowns/#comments</comments>
		<pubDate>Tue, 31 Mar 2009 15:00:10 +0000</pubDate>
		<dc:creator>Steve Reynolds</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Combo]]></category>
		<category><![CDATA[Dropdown]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Plugins]]></category>

		<guid isPermaLink="false">http://www.reynoldsftw.com/?p=1130</guid>
		<description><![CDATA[
			
				
			
		
Image Combo Box

Marghoob Suleman&#8217;s Javascript Combo Box plugin is a great way to sexy-up your combo boxes within forms. Functionality includes creating combo boxes as images entirely, as well as including images per option. Basically, you can skin the standard combo box.
jQuery DropDown Checklist

This neat jQuery Dropdown Check List widget converts the standard SELECT html [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.reynoldsftw.com%2F2009%2F03%2F11-jquery-plugins-to-enhance-html-dropdowns%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.reynoldsftw.com%2F2009%2F03%2F11-jquery-plugins-to-enhance-html-dropdowns%2F&amp;source=SteveReynolds&amp;style=normal&amp;service=bit.ly" height="61" width="50" /><br />
			</a>
		</div>
<h3>Image Combo Box</h3>
<p style="text-align: center;"><a href="http://marghoobsuleman.com/jquery-image-dropdown" target="_blank"><img class="aligncenter size-full wp-image-1129" title="image-combo" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/image-combo.png" alt="image-combo" width="480" height="100" /></a></p>
<p style="text-align: left;">Marghoob Suleman&#8217;s <a href="http://marghoobsuleman.com/jquery-image-dropdown" target="_blank">Javascript Combo Box</a> plugin is a great way to sexy-up your combo boxes within forms. Functionality includes creating combo boxes as images entirely, as well as including images per option. Basically, you can skin the standard combo box.</p>
<h3 style="text-align: left;">jQuery DropDown Checklist</h3>
<p style="text-align: center;"><img class="size-full wp-image-1132" title="dropdown-checklist" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/dropdown-checklist.png" alt="dropdown-checklist" width="425" height="134" /></p>
<p style="text-align: left;">This neat <a href="http://dropdown-check-list.googlecode.com/svn/trunk/demo.html" target="_blank">jQuery Dropdown Check List</a> widget converts the standard SELECT html element into a nice dropdown with multi tickable options.</p>
<p style="text-align: left;">
<h3>McDropDown</h3>
<p style="text-align: center;"><a href="http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm" target="_blank"><img class="aligncenter size-full wp-image-1139" title="mcdropdown" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/mcdropdown.png" alt="mcdropdown" width="418" height="129" /></a></p>
<p>Am quite fond of this implementation. As you can see in the screenshot above, <a href="http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm" target="_blank">McDropDown</a> nicely creates a nested menu of elements to choose from from a simple dropdown. It generates the data from a standard &lt;ul&gt; and &lt;li&gt; implementation and has a huge bunch of options to go with it. Worth checking out.</p>
<p><span id="more-1130"></span></p>
<h3 style="text-align: left;">Droplist Filter</h3>
<p style="text-align: center;"><a href="http://nihilex.com/droplist-filter" target="_blank"><img class="aligncenter size-full wp-image-1134" title="droplistfilter2" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/droplistfilter2.png" alt="droplistfilter2" width="424" height="45" /></a></p>
<p style="text-align: left;"><a href="http://nihilex.com/droplist-filter" target="_blank">Droplist Filter</a> is really pretty damn good. Every had a dropdown with hundreds of options in it? Sure, you can sort them alphabetically, but that is so time consuming &#8211; why not add a nice search filter, hit the Enter key and your option is selected. What a great plugin!</p>
<h3 style="text-align: left;">Sexy Combo</h3>
<p style="text-align: left;"><a href="http://vladimir-k.blogspot.com/2009/02/sexy-combo-jquery-plugin.html" target="_blank"><img class="aligncenter size-full wp-image-1135" title="sexy-combo" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/sexy-combo.png" alt="sexy-combo" width="157" height="47" /></a><a href="http://vladimir-k.blogspot.com/2009/02/sexy-combo-jquery-plugin.html" target="_blank"></a></p>
<p style="text-align: left;"><a href="http://vladimir-k.blogspot.com/2009/02/sexy-combo-jquery-plugin.html" target="_blank">Sexy Combo</a> is another take on the customizable combo dropdown box. With Sexy Combo you can skin it to a degree, as well as tell it other options such as the default text you should see before an option is selected, as well as configurables such as making the options appear above the select box rather than below&#8230;</p>
<h3 style="text-align: left;">QuickSelect</h3>
<p style="text-align: center;"><a href="http://github.com/dcparker/jquery_plugins/tree/master/quickselect" target="_blank"><img class="aligncenter size-full wp-image-1136" title="qselect" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/qselect.png" alt="qselect" width="162" height="105" /></a></p>
<p style="text-align: left;"><a href="http://github.com/dcparker/jquery_plugins/tree/master/quickselect" target="_blank">QuickSelect</a> allows you to convert a standard input form element into a nice dropdown of choices as the user types. As you can see form the example above, it has some great flexibility. I typed &#8220;aber&#8221; into it, and it has found some relatively close matches, rather than exact matches. You can obviously turn this off though, and have it return exactly the string match that you enter.</p>
<p style="text-align: left;"><center><script type="text/javascript"><!--
google_ad_client = "pub-6415056921376217";
google_ad_channel = "in-ad-unit-sq";
google_ui_features = "rc:0";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text_image";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0066CC";
google_color_text = "";
google_color_url = "0066CC";

//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</center></p>
<h3 style="text-align: left;">FlexBox</h3>
<p style="text-align: center;"><a href="http://www.fairwaytech.com/flexbox/Default.aspx" target="_blank"><img class="aligncenter size-full wp-image-1137" title="flexbox" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/flexbox.png" alt="flexbox" width="219" height="110" /></a></p>
<p style="text-align: left;"><a href="http://www.fairwaytech.com/flexbox/Default.aspx" target="_blank">FlexBox</a> is another alternative to the standard HTML dropdown box. Much the same as the others, skinnable etc.</p>
<p><strong>LinkSelect</strong></p>
<p style="text-align: center;"><a href="http://www.givainc.com/labs/linkselect_jquery_plugin.htm" target="_blank"><img class="aligncenter size-full wp-image-1138" title="linkselect" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/linkselect.png" alt="linkselect" width="381" height="100" /></a></p>
<p><a href="http://www.givainc.com/labs/linkselect_jquery_plugin.htm" target="_blank">LinkSelect</a> is slightly different in its approach whereby it converts a standard A link tag into a selectable list of options. In theory, that could be a text or image link which is a quite nice addition.</p>
<p><strong>Pop!</strong></p>
<p style="text-align: center;"><a href="http://pop.seaofclouds.com/" target="_blank"><img class="aligncenter size-full wp-image-1140" title="pop" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/pop.png" alt="pop" width="356" height="106" /></a></p>
<p>Whilst not strictly a form dropdown, you get the same effect with the <a href="http://pop.seaofclouds.com/" target="_blank">Pop! jquery plugin</a>. As the screenshot suggests, you can put anything in there, so may not be that great for forms, but you never know!</p>
<h3>jQuery Color Picker</h3>
<p style="text-align: center;"><a href="http://vreboton.ibacolod.com/DotNetNuke/ControlsandTips/jQueryColorPicker/tabid/69/Default.aspx" target="_blank"><img class="aligncenter size-full wp-image-1141" title="colorpicker" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/colorpicker.png" alt="colorpicker" width="447" height="127" /></a></p>
<p>Again, not strictly a dropdown form option, however the <a href="http://vreboton.ibacolod.com/DotNetNuke/ControlsandTips/jQueryColorPicker/tabid/69/Default.aspx" target="_blank">jQuery Color Picker</a> can easily be implemented in the same way to enable the quick selection of HTML colors.</p>
<p>ClickMenu</p>
<p><a href="http://p.sohei.org/jquery-plugins/clickmenu/"><img class="aligncenter size-full wp-image-1142" title="clickmenu" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/clickmenu.png" alt="clickmenu" width="312" height="153" /></a></p>
<p><a href="http://p.sohei.org/jquery-plugins/clickmenu/" target="_blank">ClickMenu</a> is another play on the drill down selectable. Using the plugin is as simple as:</p>
<pre class="brush: jscript;">$('#list').clickMenu();</pre>
<h3>Tools to help you learn&#8230;</h3>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<thead></thead>
<tbody>
<tr>
<td width="33%" align="center" valign="top">
<div id="attachment_613" class="wp-caption aligncenter" style="width: 111px"><a href="http://www.amazon.com/gp/product/1847196705?ie=UTF8&amp;tag=stereyblo-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1847196705"><img class="size-full wp-image-613" title="jquery13" src="http://www.reynoldsftw.com/wp-content/uploads/2009/02/jquery13.jpg" alt="Learning jQuery 1.3" width="101" height="132" /></a><p class="wp-caption-text">Learning jQuery 1.3</p></div>
<p><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=stereyblo-20&amp;l=as2&amp;o=1&amp;a=1847196705" border="0" alt="" width="1" height="1" /></td>
<td width="33%" align="center" valign="top">
<div id="attachment_770" class="wp-caption aligncenter" style="width: 111px"><a href="http://www.amazon.com/gp/product/B00154JDAI?ie=UTF8&amp;tag=stereyblo-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=B00154JDAI"><img class="size-full wp-image-770" title="kindle" src="http://www.reynoldsftw.com/wp-content/uploads/2009/03/kindle.jpg" alt="Amazon Kindle 2" width="101" height="132" /></a><p class="wp-caption-text">Amazon Kindle 2</p></div>
<p><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=stereyblo-20&amp;l=as2&amp;o=1&amp;a=B00154JDAI" border="0" alt="" width="1" height="1" /></td>
<td width="33%" align="center" valign="top">
<div id="attachment_612" class="wp-caption aligncenter" style="width: 111px"><a href="http://www.amazon.com/gp/product/1847195121?ie=UTF8&amp;tag=stereyblo-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1847195121"><img class="size-full wp-image-612" title="jquery-ui" src="http://www.reynoldsftw.com/wp-content/uploads/2009/02/jquery-ui.jpg" alt="jQuery UI 1.6" width="101" height="132" /></a><p class="wp-caption-text">jQuery UI 1.6</p></div>
<p><img style="border:none !important; margin:0px !important;" src="http://www.assoc-amazon.com/e/ir?t=stereyblo-20&amp;l=as2&amp;o=1&amp;a=1847195121" border="0" alt="" width="1" height="1" /></td>
</tr>
</tbody>
</table>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.reynoldsftw.com%2F2009%2F03%2F11-jquery-plugins-to-enhance-html-dropdowns%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.reynoldsftw.com%2F2009%2F03%2F11-jquery-plugins-to-enhance-html-dropdowns%2F&amp;source=SteveReynolds&amp;style=normal&amp;service=bit.ly" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://www.reynoldsftw.com/2009/03/11-jquery-plugins-to-enhance-html-dropdowns/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

