Need guidance for HTML-dom designing ..

Question

I have started with the project where I am suppose to use client side scripting @ extreme.

this is the scenario :
There are two drop-down lists in my form on my web-page ..
one is COUNTRY and other is STATE.
The drop-down list STATE must be disabled untill One of the values in Country is selected and According to the value selected in drop-down list COUNTRY, the corressponding states must be present in STATE drop-down list.

This is as same as the one we see on Email-account, sign-up page ..

I load the data (mapping of country with states) from an XML file .. (Assume that this file will be present on client system in a fixed, absolute path ..)

I am seeking a guidance on Internet to achieve this. any links or tutorials would be helpful.

Answer 1

Since this is a web application, you won't be able to read file contents from the client machine due to security issues. See javascript security model. Store the country and state info in your server and when the onchange event occurs for the drop down list fill the second drop down list values from server using AJAX.

Answer 2

I would keep the country and state values in a database somewhere on your server to avoid locking issues if multiple users are using the application at the same time. I would then implement your drop down using a CascadingDropDown with the AjaxControlToolkit. See an example here

There is a tutorial you can follow here

Answer 3

Not wanting to be too vague, but this is a standard cascading dropdown scenario. The vast majority of AJAX frameworks will have simple solutions to this problem, it's just a question of which one you prefer.

I've done this myself in ASP.Net AJAX and in jQuery, but there are many other good frameworks around.

As has already been suggested, accessing the XML through the file system is problematic, but you could use a local URL or (preferably IMHO) through a server-side resource (such as a DB)