Welcome Guest, Not a member yet? Register   Sign In
2 dropdown menus when one is selected the other appears
#1

[eluser]the_unforgiven[/eluser]
Hi

I have 2 dropdowns like so
Code:
<div class="control-group" id="cat">
     <label class="control-label" for="name">Category&nbsp;<span  red;">*</span></label>
    
     <div class="controls">
      &lt;?php  echo form_dropdown('category', $categories, 'id="cat"'); ?&gt;

     </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">
                &lt;?php echo form_dropdown('subcategory', $subcategories, 'id="subcategory"'); ?&gt;
            </div>
            </div>
        </div>

So i need some help creating that only the Category is visible to start with then the next dropdown appears based on the selection to start with and only needs to show relevant to the first option.

Can anyone help me, I know jQuery going to be best and fastest option i know the logic but struggling to write it.

Help greatly appreciated!

The html for these dropdowns are
Code:
<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>
</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>&lt;!-- this relates to the Interiors option
<option value="12">a sub cat of woman</option><! -- this relates to the woman option
</select>            </div>
            </div>
        </div>
// All of which come from the db so need to know how to acheive this please!!
#2

[eluser]CroNiX[/eluser]
You'd create an onChange event for the first dropdown and initially hide the second select. In that event, grab the selected value of that dropdown and use ajax to send it to a controller. That controller will return the possible values for the second dropdown based on the value sent. In the onComplete event of the ajax call, take the new dropdown values returned and replace the options for the 2nd dropdown, and then show() that dropdown.

You should give your selects id's so you can easily grab the value, and also replace the options. They don't show up in your rendered code...

You can google "javascript dependant select" for tons of tutorials and demos which should all work the same whether you use CI or not.
#3

[eluser]the_unforgiven[/eluser]
Thanks CroNiX i will do that! Hopefully i will find a solution.




Theme © iAndrew 2016 - Forum software by © MyBB