468,119 Members | 1,924 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,119 developers. It's quick & easy.

How to create Dependent Dropdown List?

aveeva
33
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
3 951
Luuk
1,043 Expert 1GB
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
33
Could you pls explain in brief, I am learning stage pls.
May 23 '19 #3
Luuk
1,043 Expert 1GB
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.

Similar topics

2 posts views Thread by Tony Grider | last post: by
5 posts views Thread by JIM.H. | last post: by
2 posts views Thread by Travis | last post: by
15 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.