0

Is there a easy way to have something like 3 select boxes where the previous one sets the options for the next one

like if the first select is [clothing, food, countries]

choosing food, will have in the 2nd select [cheese, meat, fruits]

and choosing fruits will have the last select as [apples, bananas, oranges]

also need to take into account that select data could be dynamic and comes from a server (before or during the selection)

the ways I thought of doing this are:

  1. get all the data upfront, in some kind of json or other structure, and everytime a select is chosen, take the corresponding data. This could work for static data, but not for ajaxed data

  2. everytime a select is chosen, get the data for its value. This could work but also requires manual js handling

Is there an easier way to do this?

Nick Ginanto
  • 31,090
  • 47
  • 134
  • 244
  • you can create *all* possible selects, and then hide/show what you need – imkost Sep 01 '15 at 14:02
  • But if your data is dynamic, I think you have 2 good solution : The first, when you select a row, you load with ajax the next select. This is if your values change often. Like : select N°1 : [clothing, food, countries] => a user select an option => you ask via ajax the possibilities for the next select => you show select N°2. Or the second, the easier just load all the form options onload of the page, or after a certain action and create all the structure by showing/hiding selects based on what you selected. Dunno if I'm clear enough ^^ – Crocsx Sep 01 '15 at 14:04
  • The option one I don't think it is a good practice, if you have many options it can cause a performance problem. I'd do the second one, it is more performatic and clean. To populate the combos easily, take a look here, if you are able to use jquery: http://stackoverflow.com/questions/815103/jquery-best-practice-to-populate-drop-down – fdam Sep 01 '15 at 14:09

0 Answers0