Three-level menu with an AJAX loading list: which is better?

Question

Django

There is a search form in which there are 3 select lists, one depends on the other. Those. if I make a choice in the "A" menu, then only the corresponding options should appear in the "B" menu, then when I make a choice in the "B" menu in the next "C" menu, the corresponding list should also appear.

If, after selecting all three fields, I select something else in the "A" field, then all the others should be reset and the selection should happen again.

In the database, the fields are linked by Foreign Key.

Question: how best to implement such an interrelated selection:
1) Load everything at once into an html template, and then do all the selections using pure JS?
2) At each stage of the selection, make a request to the database via AJAX?

Are there any subtleties in Django that are worth considering, or is it pure JS, and Django only receives / gives?

Answer 1

There are typical solutions to this problem, you might be interested to see them.
One of the options == django-select2.readthedocs.io/en/latest/index.html
Other options == https://djangopackages.org/grids/g/auto-complete/

Answer 2

If the clients are permanent, then you can consider the option of dynamic loading and caching in localStorage