Different approaches for loading input select data

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!

I use react and react-select for this kind of situation. Loading options via methods.

Thanks, I have done this also in the past, though currently on a project using Blaze/Viewmodel.

I think the concept (and decisions to make) are the same though regardless