Bootstrap-Multiselect: Wie man beide Funktionen von optionClass und includeSelectAllOption bekommen

Ich folgte der Bootstrap Multiselect documentation Bootstrap Multiselect zu implementieren. Allerdings möchte ich sowohl die Effekte optionClass als auch includeSelectAllOption bekommen, damit ich alle und alternative Farben auswählen kann. Hier ist mein Code:Bootstrap-Multiselect: Wie man beide Funktionen von optionClass und includeSelectAllOption bekommen

<!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>

Bitte helfen Sie mir beide ihre Effekte zu bekommen.

Quelle

2016-07-24 user5005768

Sie können einfach die includeSelectAllOption hinzufügen, sieht das wie folgt aus:

<!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>

Wenn Sie in Ihre Färbung die Option Alle markieren berücksichtigen wollen, also behandeln die Option Alle markieren als odd (als erste Option), können Sie die Färbung umkehren und die multiselect-all Klasse manipulieren:

<!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>

Quelle

2016-09-02 12:30:03

Bootstrap-Multiselect: Wie man beide Funktionen von optionClass und includeSelectAllOption bekommen

Antwort

Verwandte Themen