How to create Dependent Dropdown List?

[aveeva]

How to create Dependent Dropdown List?

 

                    <div class="form-group">
                            <label class="control-label col-sm-2" for="i_have">I have :</label>
                            <div class="col-sm-10">  
                                <select id="old" class="form-control" placeholder="Select I have" name="i_have">
        
                                    <option value = "select_option">Select Option</option>
                                    <option value = "three_compact">3 Compact</option>
                                    <option value = "three_regular">3 Regular</option>
                                    <option value = "three_triple">3 Triple</option>
                                    <option value = "five_compact">5 Compact</option>
                                    <option value = "five_regular">5 Regular</option>
                                    <option value = "five_triple">5 Triple</option>
                                    <option value = "seven_compact">7 Compact</option>
                                    <option value = "seven_regular">7 Regular</option>
                                    <option value = "seven_triple">7 Triple</option>
                                    <option value = "nine_compact">9 Compact</option>
                                    <option value = "nine_regular">9 Regular</option>
                                    <option value = "nine_triple">9 Triple</option>   
                                </select>
                            </div>
                        </div>
        
        
        
        
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="i_want">I want :</label>
                            <div class="col-sm-10">  
                                <select id="new" class="form-control" placeholder="Select I want" name="i_want">
        
                                    <option value = "select_option">Select Option</option>
                                    <option value = "three_compact">3 Compact</option>
                                    <option value = "three_regular">3 Regular</option>
                                    <option value = "three_triple">3 Triple</option>
                                    <option value = "five_compact">5 Compact</option>
                                    <option value = "five_regular">5 Regular</option>
                                    <option value = "five_triple">5 Triple</option>
                                    <option value = "seven_compact">7 Compact</option>
                                    <option value = "seven_regular">7 Regular</option>
                                    <option value = "seven_triple">7 Triple</option>
                                    <option value = "nine_compact">9 Compact</option>
                                    <option value = "nine_regular">9 Regular</option>
                                    <option value = "nine_triple">9 Triple</option>   
                                </select>
                            </div>
                        </div>
                    

 

If the first dropdown "3 Compact " is selected second dropdown should not be able to select "3 Compact" & if first dropdown "5 Regular" is selected second dropdown should not be able to select below values of 5 Regular  like "3 Compact, 3 Regular, 3 Triple, 5 Compact.

The logic is, if first dropdown value selects like 5, second dropdown value must select above 5 not 4 or 3 or 2 or 1.

[Barand]

You would make it a lot easier for yourself if the option values were sortable. At present they are not, giving

1. five
2. nine
3. seven
4. three

You need to use ids as the values

+----+---------------+
| Id |  Name         |  
+----+---------------+
|  1 | three_compact |
|  2 | three_regular |
|  3 | three_triple  |
|  4 | five_compact  |
|  5 | five_regular  |
|  6 | five_triple   |
|  7 | seven_compact |
|  8 | seven_regular |
|  9 | seven_triple  |
| 10 | nine_compact  |
| 11 | nine_regular  |
| 12 | nine_triple   |
+----+---------------+