Change DIV contents on SELECT change
- by Ian Batten
I'm looking for a method of how to change the contents of a div when an option on a select dropdown is selected.
I came across the following:
<script type="text/javascript" src="jquery.js"></script>
<!-- the select -->
<select id="thechoices">
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIVs -->
<div id="boxes">
<div id="box1"><p>Box 1 stuff...</p></div>
<div id="box2"><p>Box 2 stuff...</p></div>
<div id="box3"><p>Box 3 stuff...</p></div>
</div>
<!-- the jQuery -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$("#thechoices").change(function(){
$("#" + this.value).show().siblings().hide();
});
$("#thechoices").change();
</script>
This worked fine on it's own, but I want to use it with the following script:
http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm
When using it alongside this chainedmenu script, it just loads all of the DIV box contents at once, rather than each div option when a SELECT option is chosen.
Any ideas on what I can use alongside this chainedmenu script to get different DIV contents to show for different SELECT options?
Thanks in advance,
Ian
EDIT Here is a test page: http://freeflamingo.com/t/new.html
