One thing that I find frustratingly complex on almost any app is setting up select boxes, with large amount of options, and selects that are dependent on one another.
I always feel like this takes up an unreasonable amount of time to get right when I’d sooner be writing the business logic for the rest of the app.
Say I have a collection of clients and their projects. On page load you want the clients list either to be populated directly or perhaps only on typing (if the collection is large), then on selecting a client you want the list of projects to update accordingly to match the selected client.
A few different approaches:
- Use “normal” select HTML elements, load all clients and their projects when the page/form is loaded, then simply use a helper to select projects that belong to the chosen client
- Use a library (Select2, Choices.js) and attempt to have all necessary helpers/data loaded before these initialise (what are people’s thoughts here on an acceptable amount of data to “preload” while a form page loads?)
- Use a library and use that library’s code to insert the necessary options as well as update them when values change
The last approach I feel ought to work but the code gets messy fast and is pretty hard to encapsulate and reuse I find. I was just wondering what approaches other people are using for this pretty common scenario. Thanks!