Change Page Based On Drop Down Menu

March 22, 2014 by Uncategorized No Comments

Hi All,

following is the jquery code needed to change a html pages content based on a drop down box selection,

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<script>

$(function() {
$(‘select’).change(function() {
var val = $(this).val();
if (val) {
$(‘div:not(#div’ + val + ‘)’).slideUp();
$(‘#div’ + val).slideDown();
} else {
$(‘div’).slideDown();
}
});
});

</script>

</head>
<body>
<select id=”selectme”>
<option value=”1″>Volvo</option>
<option value=”2″>Saab</option>
<option value=”3″>Opel</option>
<option value=”4″>Audi</option>
</select>

<div id=”div1″ class=”group”>
<p>Div 1</p>
</div>

<div id=”div2″ class=”group”>
<p>Div 2</p>
</div>

<div id=”div3″ class=”group”>
<p>Div 3</p>
</div>

<div id=”div4″ class=”group”>
<p>Div 4</p>
</div>

 

This will allow you to change your pages content depending on the dropdown option selected.