bootstrap-multiselect

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

Thumbnail
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 Codepen.io
Copyright navupawar ©

Technologies

  • 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.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" ></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
        <link rel="stylesheet" href="http://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
    </head>
    <body>
        <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>
        <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>
        </select>
        <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']];
                $('#prop_category_submit').multiselect({
                    enableFiltering: true,
                    filterPlaceholder: 'Search...',
                    onChange: function (element, checked) {
                        if (checked === true) {
                            console.log(element[0].value, checked);
                            var optionSelected = element[0].value;
                            console.log(optionSelected);
                            options[optionSelected].map(function(v){
                                console.log(v);
                                var subvalue = v.split(' ');
                                $('#sub_sector_submit').append('<option value="'+subvalue[1]+'">'+v+'</option>');
                                $('#sub_sector_submit').multiselect('rebuild');
                            });
                        }
                    }
                });
                $('#sub_sector_submit').multiselect({
                    enableFiltering: true,
                    filterPlaceholder: 'Search...'
                });
            });
        </script>
    </body>
</html>


/*Downloaded from https://www.codeseek.co/navupawar/bootstrap-multiselect-QGXKzB */
    /


/*Downloaded from https://www.codeseek.co/navupawar/bootstrap-multiselect-QGXKzB */
    

Comments