Dynamic Dropdowns based on prev selection

[eluser]the_unforgiven[/eluser]
I'm looking for some help on how to dynamically show dropdowns(DD)when a user goes to the page only the main categories should show in the DD then upon selection show another new DD that shows the sub-categories of the selected categeory.

I know javascript/jQuery will be used here and after writing the following it still doesn't work so maybe i've done something wrong.


The jQuery - http://jsfiddle.net/J9uFR/
The html - http://jsfiddle.net/5Ahek/

Would some one be kind enough to help me out here, maybe show an example based what ive done and explain what each does please....

Thanks in advance!

[eluser]boltsabre[/eluser]
Try posting what your actual drop downs look like, hard to tell because you've posted "PHP" in the "HTML" jsfiddle, and obviously it's not rendering.

But at a quick glance it looks like you have used the wrong selector here in your jQuery

Code:

$('.' + val).show();

You're trying to show something by its class (thats what the period selector is), but from what I can see you are generating your subcat DDs with IDs, not classes. Try using hash (#) instead, that's the ID selector in jQuery.

[eluser]the_unforgiven[/eluser]
The html output is:

Code:

<div class="control-group" id="cat">
     <label class="control-label" for="name">Category&nbsp;<span  red;">*</span></label>
    
     <div class="controls">
      <select name="category">
<option value="2">Interiors</option>
<option value="3">Woman</option>
<option value="4">Man</option>
<option value="10">New Main Category</option>
<option value="16">a new cat wimage</option>
</select>
     </div>
     </div>
        <div class="style-sub-1" id="subcategory">
            <div class="control-group style-sub-1">
            <label class="control-label" for="name">Sub Category&nbsp;<span  red;">*</span></label>
            
            <div class="controls">
                <select name="subcategory">
<option value="11">Wall Clocks</option>
<option value="12">a sub cat of woman</option>
<option value="13">a sub cat of man</option>
<option value="14">a sub cat of newmain</option>
<option value="15">another sub cat of interiors</option>
<option value="17">new interiors cat with image</option>

</select>            </div>
            </div>
        </div>