In this example below you will see how to do a bootstrap-multiselect with some HTML / CSS and Javascript

This awesome code was written by navupawar, you can see more from this user in the personal repository.
You can find the original code on
Copyright navupawar ©


  • HTML
  • CSS
  • JavaScript
    <!DOCTYPE html>
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="" rel="stylesheet"/>
        <script type="text/javascript" src=""></script>
         <script src="" ></script>
    <script src="" ></script>
        <script src=""></script>
        <link rel="stylesheet" href="">
        <label for="prop_category_submit">ADD Options</label>
        <select id="prop_category_submit" name="multiselect1[]" multiple="multiple">
            <option value="1">option 1</option>
            <option value="2">option 2</option>
            <option value="3">option 3</option>
            <option value="4">option 4</option>
        <select id="sub_sector_submit" name="multiselect2[]" multiple="multiple">
            <option value="1">option 11</option>
            <option value="2">option 21</option>
            <option value="3" selected>option 32</option>
            <option value="4" selected>option 43</option>
            <option value="5">option 55</option>
        <script type="text/javascript">
            $(document).ready(function () {
                var options = [
                    ['option 1a', 'option 1b', 'option 1c'],
                    ['option 2a', 'option 2b', 'option 2c'],
                    ['option 3a', 'option 3b', 'option 3c'], 
                    ['option 4a', 'option 4b', 'option 4c']];
                    enableFiltering: true,
                    filterPlaceholder: 'Search...',
                    onChange: function (element, checked) {
                        if (checked === true) {
                            console.log(element[0].value, checked);
                            var optionSelected = element[0].value;
                                var subvalue = v.split(' ');
                                $('#sub_sector_submit').append('<option value="'+subvalue[1]+'">'+v+'</option>');
                    enableFiltering: true,
                    filterPlaceholder: 'Search...'

/*Downloaded from */

/*Downloaded from */