Bootstrap-Multiselect: как получить обе функции опцииClass и includeSelectAllOption

Я следовал за Bootstrap Multiselect documentation, чтобы реализовать мультиплексор bootstrap. Однако я хочу получить как эффекты optionClass, так и includeSelectAllOption, так что я получу выбор всех и чередующихся раскрасок. Вот мой код:Bootstrap-Multiselect: как получить обе функции опцииClass и includeSelectAllOption

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

Пожалуйста, помогите мне, чтобы получить их обоих эффектов.

источник

2016-07-24 user5005768

Вы можете просто добавить includeSelectAllOption, это выглядит следующим образом:

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

Если вы хотите принять во внимание выберите все опции в вашей окраске, то есть лечить выбрать все опции как odd (в качестве первого варианта), вы можете отменить окраску и манипулировать классом multiselect-all:

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

источник

2016-09-02 12:30:03

Bootstrap-Multiselect: как получить обе функции опцииClass и includeSelectAllOption

ответ

Смежные вопросы