jQuery show hide基於加載選擇值的div - 如何在此代碼中添加加載元素

Question

如何在此代碼中添加加載函數？任何人都請修改此。

$(function() { 
 
    $('#colorselector').change(function() { 
 
     $('.colors').hide(); 
 
     $('#' + $(this).val()).show(); 
 
    }); 
 
});

<Select id="colorselector"> 
 
    <option value="red">Red</option> 
 
    <option value="yellow">Yellow</option> 
 
    <option value="blue">Blue</option> 
 
</Select> 
 
<div id="red" class="colors" style="display:none">Ok janu i love you </div> 
 
<div id="yellow" class="colors" style="display:none"> yellow.. </div> 
 
<div id="blue" class="colors" style="display:none"> blue.. </div>

Answer 1

只是包括jQuery的：

$(function() { 
 
      $('#colorselector').change(function(){ 
 
       $('#loading').show(); 
 
       $('.colors').hide(); 
 
       $('#loading').hide(); 
 
       $('#' + $(this).val()).show(); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<Select id="colorselector"> 
 
     <option value="red">Red</option> 
 
     <option value="yellow">Yellow</option> 
 
     <option value="blue">Blue</option> 
 
    </Select> 
 
    //OUTPUT 
 
    <div id="red" class="colors" style="display:none">Ok janu i love you </div> 
 
    <div id="yellow" class="colors" style="display:none"> yellow.. </div> 
 
    <div id="blue" class="colors" style="display:none"> blue.. </div> 
 
    <div id="loading" style="display:none">Loading...</div>