Welcome Guest, Not a member yet? Register   Sign In
Dynamic Dropdowns based on prev selection

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!

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
$('.' + 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.

The html output is:
<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>
        <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>

Theme © iAndrew 2016 - Forum software by © MyBB