JSFiddle - React, Tailwind, and code Playground

by Nofiden Noble

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<select id="example-refresh" multiple="multiple" style="display: none;">
                                                    <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>
                                                    <option value="6">Option 6</option>
                                                </select>

CSS

#output{
      float: right;
      padding-right: 20px;
}

JavaScript

$(document).ready(function() {
        $('#example-refresh').multiselect();
 
        $('#example-refresh-select').on('click', function() {
            $('option[value="1"]', $('#example-refresh')).prop('selected', true);
            $('option[value="3"]', $('#example-refresh')).prop('selected', true);
            $('option[value="4"]', $('#example-refresh')).prop('selected', true);
 
            alert('Option 1, 2 and 4.');
        });
 
        $('#example-refresh-deselect').on('click', function() {
            $('option', $('#example-refresh')).each(function(element) {
                $(this).removeAttr('selected').prop('selected', false);
            });
        });
 
        $('#example-refresh-button').on('click', function() {
            $('#example-refresh').multiselect('refresh');
        });
    });