Search code examples
multi-selectbootstrap-multiselect

Bootstrap-Multiselect: how to get both features of optionClass and includeSelectAllOption

I was following the Bootstrap Multiselect documentation to implement bootstrap multiselect. However I want to get both the effects of optionClass and includeSelectAllOption so that I get select all and alternate coloring. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-optionClass').multiselect({
            
            optionClass: function(element) {
                var value = $(element).val();
 
                if (value%2 == 0) {
                    return 'even';
                }
                else {
                    return 'odd';
                }
            }
        });
    });
</script>
<style type="text/css">
    #example-optionClass-container .multiselect-container li.odd {
        background: #eeeeee;
    }
</style>
</head>
<body>

<div class="container">
  <h2>Bootstrap Multiselect Test</h2>
  <p>I want to use both <b>optionClass</b> and <b>includeSelectAllOption</b> togather:</p>            
  <div id="example-optionClass-container">
    <select id="example-optionClass" 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>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</div>
</div>

</body>
</html>

Please Help me to get both of their effects.

Solution

  • You can simply add the includeSelectAllOption, this looks as follows:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-optionClass').multiselect({
            includeSelectAllOption: true, // add select all option as usual
            optionClass: function(element) {
                var value = $(element).val();
 
                if (value%2 == 0) {
                    return 'even';
                }
                else {
                    return 'odd';
                }
            }
        });
    });
</script>
<style type="text/css">
    #example-optionClass-container .multiselect-container li.odd {
        background: #eeeeee;
    }
</style>
</head>
<body>

<div class="container">
  <h2>Bootstrap Multiselect Test</h2>
  <p>I want to use both <b>optionClass</b> and <b>includeSelectAllOption</b> togather:</p>            
  <div id="example-optionClass-container">
    <select id="example-optionClass" 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>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</div>
</div>

</body>
</html>

    If you want to take into account the select all option in your coloring, i.e. treat the select all option as odd (as the first option), you can reverse the coloring and manipulate the multiselect-all class:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-optionClass').multiselect({
            includeSelectAllOption: true, // add select all option as usual
            optionClass: function(element) {
                var value = $(element).val();
 
                if (value%2 == 0) {
                    return 'odd'; // reversed
                }
                else {
                    return 'even'; // reversed
                }
            }
        });
    });
</script>
<style type="text/css">
    #example-optionClass-container .multiselect-container li.odd {
        background: #eeeeee;
    }
    #example-optionClass-container .multiselect-all {
       background: #eeeeee;
    }
</style>
</head>
<body>

<div class="container">
  <h2>Bootstrap Multiselect Test</h2>
  <p>I want to use both <b>optionClass</b> and <b>includeSelectAllOption</b> togather:</p>            
  <div id="example-optionClass-container">
    <select id="example-optionClass" 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>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</div>
</div>

</body>
</html>