Show/Hide multiple DIVs with Select using jQuery


Today ill discuss Show/Hide multiple DIVs with Select using jQuery. Bellow a complete example about that

<script type=”text/javascript”>
$(document).ready(function(){
$(‘.box’).hide();
$(‘#dropdown’).change(function() {
$(‘.box’).hide();
$(‘#div’ + $(this).val()).show();
});
});
</script>
<form>
<select id=”dropdown” name=”dropdown”>
<option value=”0″>Choose</option>
<option value=”area1″>DIV Area 1</option>
<option value=”area2″>DIV Area 2</option>
<option value=”area3″>DIV Area 3</option>
</select>
</form>
<div id=”divarea1″>DIV Area 1</div>
<div id=”divarea2″>DIV Area 2</div>
<div id=”divarea3″>DIV Area 3</div>

Advertisements

5 thoughts on “Show/Hide multiple DIVs with Select using jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s