javascript - jQuery show hide div based on select value with loading-how to add loading element in this code -
how add loading function in code? modify please.
$(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 love </div> <div id="yellow" class="colors" style="display:none"> yellow.. </div> <div id="blue" class="colors" style="display:none"> blue.. </div>
just include 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 love </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>
Comments
Post a Comment