Home jQuery jQuery Multiselect Plugin

jQuery Multiselect Plugin

by TheScriptKiddie

1- Include CSS / JS

To use this jQuery multiselect plugin, you need to include these files.

JQuery

<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>

CSS stylesheet file before closing head tag.

<link href="jquery.multiselect.css" rel="stylesheet" />

JavaScript plugin file after including jQuery

<script src="jquery.multiselect.js"></script>

2- Create HTML

You need to create required html like this to use this plugin.

<div id="multi-select">
    <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select>

    <!-- input to send selected values to server -->
    <input type="hidden" name="selected_values" disabled="disabled" placeholder="Selected Values"/>
</div>

3- Initialize the plugin

To initialize the plugin, you need to call plugin when document is ready like this in a script tag or javascript file.

$(document).ready(function(){
    $("#multi-select").multiSelect({
        label: "Select Options" // Label to show on the dropdown
    });
})

Result

As a result, it will create a dropdown which will let user select multiple options. You can customize it more by styling in css.

jQuery multiselect plugin

To learn how to create this plugin or how to create a multiselect in jquery, see the following post here.

You may also like

Leave a Comment