Updated 17 April 2012
A recent project that we worked on required a <select> element that allowed multiple selections. An example is shown below:
The advantages
This allows more than one option to be selected if the user holds down the modifier key (the CTRL key in Windows) whilst making their selection. The depth of the select element can also be limited if the list is very long, although generally you’d want more than one option on display.
The disadvantages
However, there did seem to be a couple of disadvantages. Firstly, not all users would be aware of the modifier key or how to use it. Secondly, pre-selected values could inadvertently be unselected if the user makes additional choices without holding down the modifier key. If several options are pre-selected when the page loads this could prove to be a nightmare for the user to untangle.
The solution
Replacing the select element with checkboxes seemed like the obvious choice, but this would take up more space on the screen and potentially look messy. The solution? Checkboxes that are styled to look like somewhat like a multiple select element.
First of all we changed the select element into a series of checkboxes, wrapped in a div with an appropriate class name:
[html]
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
</div>
[/html]
Next we apply some CSS styling to give the desired effect:
[css]
.multiselect {
width:20em;
height:15em;
border:solid 1px #c0c0c0;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color:#ffffff;
background-color:#000099;
}
[/css]
The final touch
We can extend this idea using jQuery to highlight the selections. We should of course highlight pre-selected checkboxes when the page first loads, as well as selections that the user makes afterwards. Here’s a function that we knocked together for this purpose:
[javascript]
jQuery.fn.multiselect = function() {
$(this).each(function() {
var checkboxes = $(this).find("input:checkbox");
checkboxes.each(function() {
var checkbox = $(this);
// Highlight pre-selected checkboxes
if (checkbox.prop("checked"))
checkbox.parent().addClass("multiselect-on");
// Highlight checkboxes that the user selects
checkbox.click(function() {
if (checkbox.prop("checked"))
checkbox.parent().addClass("multiselect-on");
else
checkbox.parent().removeClass("multiselect-on");
});
});
});
};
[/javascript]
We can then apply the functionality to any group of checkboxes inside a container with the classname “multiselect”
[javascript]
$(function() {
$(".multiselect").multiselect();
});
[/javascript]
Don’t forget you need to include the jQuery library too:
[html]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
[/html]
Here’s the final results: