Having drop downs on our web page enhances the overall quality and design on the screen.
A drop-down thus works as an alternative and in specific cases, a better option, as compared to radio buttons and checkboxes. Wait, what? Did we say an alternative to both radio buttons and checkboxes? But, it should have been just the radio button, shouldn’t it?
A radio button does not allow more than one selections and a checkbox, on the other hand, allows one or more than one selections. A user can select only one option from a drop-down list and therefore it resembles just the radio button in its functionality and not the checkboxes, right? Well, this is where the concept of multiple selections in a select box comes into play.
How can I allow users to select multiple options from a select box?
From a web designer’s perspective, allowing the user to choose multiple options from a select box is fairly simple and straightforward. We just need to add the “multiple” attribute to the <select> element. Now, in order to select multiple options, you have to add a size attribute also to the select element. This will make the select box look like a box rather than just the drop-down.
The user has to hold down the Ctrl key (in Windows) and Command key (on Mac) to select the choices.
<select name="Country" multiple size="5">
<option value="USA">USA</option>
<option value="Russia">Russia</option>
<option value="India">India</option>
<option value="Britain">Britain</option>
</select>
Note these points
-
The “multiple” attribute is a Boolean attribute which when present, signifies that multiple options can be chosen.
-
From a web designer’s perspective, the HTML code for single selections and multiple selections from a drop-down differs a little, however; from the end-user perspective, this difference is not visible on the webpage. The select box would not change its layout or styling in either case. Therefore, the user must be told how to select multiple options from the box.
-
Given the point mentioned above, it is a better choice to pick checkboxes over multiple selections if the number of choices is less.
-
The way to select multiple options from a drop-down differs from one operating system to another. While control button (Ctrl) is used for the selections in Windows, the command button does the trick in Mac systems.
Enhancing the Dropdown
As you can see, the native HTML select box is quite limited especially for choosing multiple options. This is where JavaScript and the highly effective libraries come into the fray. The select2 jQuery component gives the designer the power to customize the overall layout of the select box along with incorporating high utility options such as searching, dynamic loading, tagging, among others.
Does select2 support multiple selections?
Select2 supports multiple selections in drop-down list. To enable multiple selections, just include ‘multiple’ as an attribute.
The advantage here is that the user does not have to press Ctrl or Command key to select multiple options.
<script>
$(function()
{
$(".js-example-basic-multiple").select2();
});
</script>
<select class="js-example-basic-multiple" multiple="multiple">
<option value="US">United States</option>
<option value="IND">India</option>
<option value="GBR">Great Britain</option>
</select>
Select2 also adds other enhancements as well. For Example, in order to limit the number of choices the user can make, just add maximumSelectionLength in the Select2 options like this:
$(".js-example-basic-multiple-limit").select2(
{
maximumSelectionLength: 2
});
Read more about Select2 in the documentation