How to implement multiple selection with check boxes in an HTML select control using jQuery

With html you can create drop-down lists with select control and select multiple items by simultaneously pressing the CTRL key and clicking on each of the elements to select. This can be complicated for people who visit your website and that is not what people want. Why did you write this article, instead of using such a useless selection box, we implemented a jQuery plugin to make this simpler. You can download the example here.

The plugin is jQuery Multiple Select, follow the steps below to implement multiple selection easily and in a matter of seconds.

1. Install the Multiple Select Plugin plugin

Multiple Select is a very good plugin jQuery that allows you to select multiple items with check boxes instead of simultaneously pressing CTRL and selecting the options in the default selection. To use this add-on in your project, you will need 3 files, the JavaScript, the style sheet and an image containing the drop-down arrow. You can download these files from the Github repository and include a local copy in your project.

<!-- Using a local copy -->

<!-- Include the default stylesheet -->
<link rel="stylesheet" type="text/css" href="multiple-select.css">
<!-- Include plugin -->
<script src="multiple-select.js"></script>

<!-- Or using a CDN -->

<!-- Include the default stylesheet -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.css">
<!-- Include plugin -->
<script src="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.js"></script>

2. Initialize and use the plugin

To initialize the plugin, you need a selection element with the multiple-selection attribute activated, you do not need to add special marks or other unnecessary things, simply include the plugin and initialize it in the element:

<!-- A multiple select element -->
<select id="my-select" multiple="multiple">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<script>
    // Initialize multiple select on your regular select
    $("#my-select").multipleSelect({
        filter: true
    });
</script>

3. Full example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demos</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="multiple-select.css" />
</head>
<body>
<div class="container">
    <div class="form-group">
        <label>Month</label>
        <select id="ms" multiple="multiple" class="form-control">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="multiple-select.js"></script>
<script>
    $(function() {
        $('#ms').change(function() {
            console.log($(this).val());
        }).multipleSelect({
            width: '100%'
        });
    });
</script>
</body>
</html>