MenuSelect - Change Content
Utilize this to change content dynamically on a page.
by Jared
HTML
<div>
<select>
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div> Testing to see if i can have data peppered in.</div>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div> first block of data </div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
<div class="red box"> Showing it all </div>
<div>
essentially - what i would like to do is have a drop down that looks at a folder and lists all the folders that they can select.. So for example:
Customers (main folder)
--> Trace3 (Option1)
--> Icon Fitness(Option2)
--> Charter (option3)
--> (add new customer folder later but options still update)
I then want to pass that to a variable that will change the content in the HTML page.
Example:
If i have content - blah blah blah blah If i have content - blah blah blah blah If i have content - blah blah blah blah If i have content - blah blah blah blah
If i have content - blah blah blah blah If i have content - blah blah blah blah If i have content - blah blah blah blah If i have content - blah blah blah blah
</div>
JavaScript
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="red"){
$(".box").not(".red").hide();
$(".red").show();
}
else if($(this).attr("value")=="green"){
$(".box").not(".green").hide();
$(".green").show();
}
else if($(this).attr("value")=="blue"){
$(".box").not(".blue").hide();
$(".blue").show();
}
else{
$(".box").hide();
}
});
}).change();
});