Multi Select Dropdown – jQuery

Today, I’ve come up with a Multi-Select Drop-down (with check-boxes inside) using jQuery. I thought, it would be time-consuming, but I had to make it and here it is.

Well, not really, I’ve used a drop-down and and check-boxes inside. Why??
A: Older IE doesn’t support CSS3 and also to make it look alike in all browsers, I’ve NOT used HTML drop-down and check-boxes.

The final result will look something like…

Jquery Latest version
Jquery Scroll-pane Script & CSS
Images for check-box(tick & unticked), drop-down.(Try google ‘Checkbox Vectors’)

How it is made:

HTML : Images were used for check-boxes, and a JavaScript function is used to change check and unchecked states.

<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jscrollpane.js"></script>
	<div id="dropdown" style="width: 190px; height: 92px; overflow: auto; background: url('multipleselection.gif') no-repeat;">
	<table><tr><td><img id="imgCheck1" runat="server" class="CheckImage" src="checkbox.gif" style="cursor: pointer" onclick="ChangeImage(this);" /></td><td><span style="cursor: pointer" onclick="ChangeImageRepeater(imgCheck1);">Call of Duty</span></td></tr>


function ChangeImage(Image) {
            if ($(Image).attr('src').match(/(\w*)\.\w{3,4}$/)[1] == "checkbox") {
                $(Image).attr("src", "tick.gif");
            else {
                $(Image).attr("src", "checkbox.gif");

ASP.NET : Same as HTML version, then, an ASP.Net Repeater control, a ASP Label and an ASP Hidden-field is used to pick values in Server-side.

I have attached HTML version and an ASP.NET(C#) version for source.
Download here: MultiSelectDropdown (855)

Do let me know, in case you face any issues.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Warning: Missing argument 1 for cwppos_show_review(), called in /home/thedaz5/public_html/source/wp-content/themes/flat/content-single.php on line 29 and defined in /home/thedaz5/public_html/source/wp-content/plugins/wp-product-review/includes/legacy.php on line 18


Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge