Change DIV contents in SELECT shift

Question

I am looking for a way to change the contents of a div when selecting an option from a dropdown list.

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, but I want to use it with the following script:

http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

When used next to this chaining script menu, it simply loads the entire contents of the DIV window at once, and not every div parameter when the SELECT option is selected.

Any ideas on what I can use next to this seconded script menu to get different DIV content to display for different SELECT options?

Here is the test page: http://freeflamingo.com/t/new.html

Answer 1

, , , . jquery, , . , JavaScript div, , . , . , , .

$(document).ready(function() 
{

 $("#thechoices").change(function()
 {
   $("#" + this.value).show().siblings().hide();
 }); 
}

, , , , , , , , , / div.

Answer 2

, , , , DD script; jQuery :

<div class="nav">
  <select>
      <option value="1">Box 1</option>
  ...
  </select>

  <select>
      <option value="6">Box 6</option>
  ...
  </select>
</div>

<div>
    <div id="box1"><p>Box 1 stuff...</p></div>
...
</div>

$(".nav select").change(function(){
    $("#box" + $(this).val()).show().siblings().hide();
});

, .nav( ), , div.

Answer 3

, , , .

, :

<select name="firstlevel" class="..." id="firstlevel">...</select>
<select name="secondlevel" class="..." id="secondlevel">...</select>

javascript id , divs

$("#secondlevel").change(function() {
    ...
});

, script , div, , , div . HTML , :

<div id="boxes">
    <div id="box1">...</div> 
    <div id="box2">...</div> 
    <div id="box3">...</div> 
</div>

And set the values ​​in your selection options to match these identifiers

<select ... id="secondlevel">
    <option value="box1">1 months XBox live (1 ref)</option>
    etc...
</select>