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