By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,882 Members | 2,489 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,882 IT Pros & Developers. It's quick & easy.

How to create Dependent Dropdown List?

aveeva
P: 30
My dropdown :


Expand|Select|Wrap|Line Numbers
  1. <div class="form-group">
  2. <label class="control-label col-sm-2" for="i_have">I have :</label>
  3. <div class="col-sm-10">
  4. <select id="old" class="form-control" placeholder="Select I have" name="i_have">
  5.  
  6. <option value = "select_option">Select Option</option>
  7. <option value = "three_compact">3 Compact</option>
  8. <option value = "three_regular">3 Regular</option>
  9. <option value = "three_triple">3 Triple</option>
  10. <option value = "five_compact">5 Compact</option>
  11. <option value = "five_regular">5 Regular</option>
  12. <option value = "five_triple">5 Triple</option>
  13. <option value = "seven_compact">7 Compact</option>
  14. <option value = "seven_regular">7 Regular</option>
  15. <option value = "seven_triple">7 Triple</option>
  16. <option value = "nine_compact">9 Compact</option>
  17. <option value = "nine_regular">9 Regular</option>
  18. <option value = "nine_triple">9 Triple</option>
  19. </select>
  20. </div>
  21. </div>
  22.  
  23.  
  24.  
  25.  
  26. <div class="form-group">
  27. <label class="control-label col-sm-2" for="i_want">I want :</label>
  28. <div class="col-sm-10">
  29. <select id="new" class="form-control" placeholder="Select I want" name="i_want">
  30.  
  31. <option value = "select_option">Select Option</option>
  32. <option value = "three_compact">3 Compact</option>
  33. <option value = "three_regular">3 Regular</option>
  34. <option value = "three_triple">3 Triple</option>
  35. <option value = "five_compact">5 Compact</option>
  36. <option value = "five_regular">5 Regular</option>
  37. <option value = "five_triple">5 Triple</option>
  38. <option value = "seven_compact">7 Compact</option>
  39. <option value = "seven_regular">7 Regular</option>
  40. <option value = "seven_triple">7 Triple</option>
  41. <option value = "nine_compact">9 Compact</option>
  42. <option value = "nine_regular">9 Regular</option>
  43. <option value = "nine_triple">9 Triple</option>
  44. </select>
  45. </div>
  46. </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.
May 22 '19 #1
Share this Question
Share on Google+
3 Replies


Expert 100+
P: 1,035
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':
Expand|Select|Wrap|Line Numbers
  1. <option value = "seven_regular" disabled>7 Regular</option>
May 23 '19 #2

aveeva
P: 30
Could you pls explain in brief, I am learning stage pls.
May 23 '19 #3

Expert 100+
P: 1,035
LOL, I was being 'brief'... (maybe too brief...)

Call javascript when selection changes:
https://bytes.com/topic/javascript/a...t-dropdownlist

Disable options in drop down:
https://bytes.com/topic/javascript/a...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.
May 23 '19 #4

Post your reply

Sign in to post your reply or Sign up for a free account.