I haven’t seen any website do this properly…
If I have two select fields, country and state, then I would code it like so:
<select name="country">
<option>USA</option>
<option>France</option>
</select>
<select name="state">
<option></option>
</select>
I would then populate the state field using AJAX depending on the selection of the country.
However, this is the progressively enhanced state. How would it be done without the use of Javascript? and how should it be enhanced (if the previous example isn’t the best way)?
My recommendation is to have a submit button next / below the country drop down. When submitted the server will populate the state for the selected country and sends the response back.
Now, in your javascript on page load hide this button and attach on change handler to the country dropdown and make an AJAX call which will return the states.
So, if the javascript is disabled the button would perform the retrieval of the states. If enabled AJAX call would do the same.