Sometimes you may need to have a multiple selection element in a form. There are some ways to achieve this. You all have seen checkboxes, or multiple selection lists. But why not using a modern replacements like Chosen jQuery plugin instead. Chosen makes long HTML select boxes much more user-friendly. It’s built by HARVEST and supported by all modern desktop browsers. In this post you will find out how to use that in your projects. But first let’s have a look at the traditional options.
Checkbox
Checkboxes are the most common way to select multiple items:
Here’s the code:
|
1 2 3 4 5 6 7 8 |
<form> Please select every hobby that you like: <input type="checkbox" name="interests" value="reading">Reading<br> <input type="checkbox" name="interests" value="racing">Racing<br> <input type="checkbox" name="interests" value="painting">Painting<br> <input type="checkbox" name="interests" value="gardening">Gardening<br> <input type="checkbox" name="interests" value="surfing">Surfing </form> |
Multiple selection list
Another way is to use multiple attribute in HTML select tag that transforms a drop-down list to a multiple selection list:
Please select every hobby that you like:
Here’s the code:
|
1 2 3 4 5 6 7 8 |
Please select every hobby that you like: <select name="interests[]" multiple style="width: 350px;"> <option value="reading">Reading</option> <option value="racing">Racing</option> <option value="painting">Painting</option> <option value="gardening">Gardening</option> <option value="surfing">Surfing</option> </select> |
As you may know, in order to select the options you must Crtl+click (Windows) or Command+click (Mac). However, this is not obvious for most of the people.
Chosen jQuery plugin
One more user-friendly solution is to use a jQuery plugin such as Chosen that enhances functionality of a standard HTML select element. For instance, search-based filtering feature is very useful when you’re dealing with a long list. Here’s an example of Chosen jQuery plugin with the same options as above:
How to setup Chosen
1. Download the latest release from here (v1.1.0 at the time of writing this).
2. Unzip the file and upload the folder to your host. Then place this in the head of the page:
|
1 |
<link rel="stylesheet" href="/chosen_v1.1.0/chosen.css"> |
3. Place this in the body of the page:
|
1 2 3 4 5 6 7 |
<select data-placeholder="Please select every hobby that you like ..." class="chosen-select" multiple> <option value="reading">Reading</option> <option value="racing">Racing</option> <option value="painting">Painting</option> <option value="gardening">Gardening</option> <option value="surfing">Surfing</option> </select> |
4. Finally, place the javascript files at the end of the body:
|
1 2 3 4 5 6 7 |
<script src="/chosen_v1.1.0/chosen.jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery(".chosen-select").chosen(); }); </script> |
Possible issues
1. If the input field is too small remove or comment out this display: inline-block; located in class .chosen-container in chosen.css.
Possible issue 1
2. If after selection of a few items an empty line appears at the end of the input field, add
width: 25px !important; to the class .chosen-container-multi .chosen-choices li.search-field in chosen.css.
Possible issue 2
For more information or to contribute to the Chosen project please visit its GitHub page.
Leave a Reply