Change DIV contents on SELECT change

Question

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

Answer 1

It's not entirely clear where you're going wrong here but I'd image it's some breaking of convention in terms of multiple ID's of the same name or just an issue with the multiple selects you're using with this pretty archaic DD script; I'd suggest finding a jQuery alternative and or trying this:

<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();
});

This way having all your selects within .nav (or whatever you call it) changing any one of them will call the required methods to show the div you desire.

Answer 2

I see a few problems with what you posted, first you have the same ID on both select boxes that will cause problems. Also you are running the jquery code that defines the change function before the select has been built. So you can either move the JavaScript to after the final div or you can only run it once the page is ready. I suggest the latter and there is an example below. Do that and fix the id's on the selects and you should be much closer to what you wanted.

$(document).ready(function() 
{

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

Oh and one last quick note the code you are working with does seem to require a value be set for the select items make sure you also set that for the select you want to show/hide the divs with.

Answer 3

Looking at the page you posted to Steve, it looks like your problem is with non-unique ids.

Change your selects so that they each have their own unique id like so:

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

Then change your javascript to reference the id of the one you want to change the divs

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

Lastly, that script is using the value of the selected option to find the div to show so you need your box divs to have valid ids. HTML ids cannot start with numbers, so change your markup to:

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

And set the values in your select options to match these ids

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