Efficiently Populating Dropdown List: Javascript vs Database (Mysql-Django)

Question

I want to have 3 dropdown lists going like

Select:State
Select City
Select: Restaurant

When the first dropdown list has an item selected, the "Select City" list is updated, and when the second dropdown list has an item selected, the last one is updated.

I am stuck between 3 approaches:

1. Using Javascript to put in all possible values. And using form onchange to invoke the update method.
2. Prepopulate dropdown from database (MySQL).
3. A hybrid of the first two - first 2 with Jscript, last one from database.

Now how does the performance and pros/cons of each approach for hosting, VPS and PAAS compare?

Answer 1

For the sake of usability I would update the select boxes using Ajax calls.

Another benefit from choosing this approach would be that your application logic is mostly kept server side, which in most cases is easier to write tests for.

You could populate the first select box by querying in your view and passing the results down to your template. If you disable the other 2 select boxes you can active/populate them after the 1 one is selected through an ajax call.