Bootstrap Multiselect：如果沒有選擇，如何更改背景顏色

我在我的web窗體中使用了Bootstrap Multiselect。我對所有輸入/選擇字段進行了驗證檢查。如果表單提交任何空輸入或禁用選項或無選擇那麼所有的空字段將改變顏色backgroung到red.It似乎所有的輸入和選擇作品fine.However選擇爲多選我不改變color.Here僅用於多選的部分代碼：Bootstrap Multiselect：如果沒有選擇，如何更改背景顏色

if($("#example-optionClass").val() == null){ 
 
    $("#example-optionClass").css('background-color','red'); 
 
}

<!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 change the Multiselect <b>background color</b> If 'None Selected'</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>

我需要寫些什麼簡單的jquery？請幫忙。感謝

來源

2016-11-07 user5005768

function onchange_multi(){ 
 
    setTimeout(function(){ // use timeout because master script run and your script run 
 
    var btn_def = $("#example-optionClass-container").find('.btn-default'); 
 
    if($("#example-optionClass").val() === null){ 
 
     btn_def.addClass('btn-danger') //btn-danger default class of bootstrap 
 
    }else{ 
 
     btn_def.removeClass('btn-danger') 
 
    } 
 
    },50); 
 
} 
 

 

 
//onload 
 
onchange_multi(); 
 

 
//onchange 
 
$('#example-optionClass').on('change',function(){ 
 
    onchange_multi(); 
 
});

<!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 change the Multiselect <b>background color</b> If 'None Selected'</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-11-07 08:26:44

Bootstrap Multiselect：如果沒有選擇，如何更改背景顏色

回答

相關問題