I want to render 2 list-based components in a page. The list
of valid values for field 2 is dependent on field 1.
The most basic example I could think of here is a page
collecting address data which includes a country field and a state
field. The valid values for the state field would depend on the
country field value entered.
Are there best practices recommendations for this?
I don't anticipate that the valid values for field 2 would be
as static as my country/state example above. The valid values for
field 2 will be persisted in a database table.
Should I load all possible values for field 2 upfront at
start up and listen for field 1 event change to dynamically limit
the field 2 list values?
Should I invoke a web service to populate the field 2 list
values as part of the field 1 event change?
Obviously going to a database via a server call each time you
pick a country might make the app awkward to use. So you might load
the most common choices then fetch the others on demand. If you
think people will keep switching back and forth, then save the
lists so you don't re-fetch them.
If you don't have a lot of different choices, I'd load them
all at once.