How to create Dependent Dropdown List?

[aveeva]

My dropdown :

<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 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.

[Luuk]

You should create a piece of javascript which will execute when your first dropdown changes value.

Options in a drop down can be disabled by adding 'disabled':

<option value = "seven_regular" disabled>7 Regular</option>

[aveeva]

Could you pls explain in brief, I am learning stage pls.

[Luuk]

LOL, I was being 'brief'... (maybe too brief...)

Call javascript when selection changes:

https://bytes.com/topic/javascript/answers/714547-how-call-onselect-event-dropdownlist

Disable options in drop down:

https://bytes.com/topic/javascript/answers/567819-how-hide-options-select

I know both links are about 'javascript', and not about 'PHP', so your learning curve might need a change in direction towards javascript.