When one of the HTML element Select option choose , the auto hide or show div tag , In Selection html element contains number of option are there. If one of the select option choose or changes then automatically div element box auto show or hide immediately without total page not update.
The total page refresh is not best practice so that you should display or hide any html element immediate without page refresh.
Sample HTML code for auto hide or show div tag
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
</form>
<div id="red" class="colors" style="display:none"> Red color div </div>
<div id="yellow" class="colors" style="display:none">yellow color div</div>
<div id="blue" class="colors" style="display:none"> blue color div </div>
jQuery code for auto hide or show div tag
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$('#colorselector').on('change', function() {
if ( this.value == 'red')
{
$("#red").show();
}
else
{
$("#red").hide();}
if ( this.value == 'yellow')
{
$("#yellow").show();
}
else
{
$("#yellow").hide();
}
if ( this.value == 'blue')
{
$("#blue").show();
}
else
{
$("#blue").hide();
}
});
});
</script>
Final full html and jQuery code for auto hide or show div tag
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form>
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
</form>
<div id="red" class="colors" style="display:none"> Red color div </div>
<div id="yellow" class="colors" style="display:none">yellow color div</div>
<div id="blue" class="colors" style="display:none"> blue color div </div><script>
$(document).ready(function(){
$('#colorselector').on('change', function() {
if ( this.value == 'red')
{
$("#red").show();
}
else
{
$("#red").hide();}
if ( this.value == 'yellow')
{
$("#yellow").show();
}
else
{
$("#yellow").hide();
}
if ( this.value == 'blue')
{
$("#blue").show();
}
else
{
$("#blue").hide();
}
});
});
</script>
</body>
</html>
output
0 Comments:
Post a Comment