In this case, the registration form could contain a simple combo box, populated with the names of some states in the USA. However, to make the registration process a bit more interactive, I'd like to dynamically display on the browser an additional combo box when users select “Maine” as the state they're living in. In this case, the extra combo box will show the name of some cities in Maine, making the whole registration procedure slightly more interactive.
As you can see, the above (X)HTML file includes a basic registration web form, where users are able to specify different states of the United States as part of their corresponding postal addresses. However, when the option “Maine” is selected in the first combo box, an additional one will be displayed on the browser to allow visitors specify one city from that state. Quite simple, right?
As you might guess, the implementation for the previous pair of combo boxes might degrade gracefully if scripting is disabled in the client, since visitors will only be able to enter the name of the state they're living (not the cities of Maine), but the functionality of the registration form will remain nearly the same.
However, it should be noticed that the above approach for building the interactive combo boxes is rather inefficient since it relies upon the CSS “display” property to show and display the second menu included in the registration form.
Want to see how this will be achieved? Please, click on the link below and keep reading.