Binding dropdownlist using javascript

[nice_true]

Hi!

I would be grateful be grateful if I get an answer to this problem......

I have 2 dropdownlists, one contains country names and the other contains states' names.

Now what I wish to do is that when i select a particular country from the first dropdownlist, its corresponding states should get filled up in the second dropdownlist.

This sounds very simple using Autopostback property, but what I wish is through Javascript.

That means, this should happen through javascript so that the page does not get refreshed........

Thanks

[kburb23]

I assume you are using two <select> elements for your lists...

The first issue - is how is your data stored? IOW - for each country - how do you acquire... the list of states? Is it is some sort of JavaScript Array or are you getting it from the server?

[kburb23]

Well either way - if you can - try to get your data into the following format - I recommend downloading a JavaScript array of the countries (which will be smaller) - to your page - and then using ajas to retrieve the states for the country when it is selected... So you start with:

var coun = ["albania","algeria","belarus","belgium"...]

Then use the array to build the <option> elements of your select list. Iterate through each element of the array and use:

var o = new Option(text,value);

Then attach a function getStates() to the onChange event of the <select> element...

in getStates() get the value of the Countries <select> element - then use the country as a key to send an AJAX request to your server...

Have the server return the States for the selected country in JSON format (so you can eval it easily). put it in the following format.

{countryName:"United States",states:["alabama","alaska","arizona","arkansas","california","connecticut"....]}

so it is a JavaScript Object. (you can omit the country name and just output the array of state names if you want). Then just build a function to iterate the state names and add Options to your States <select> element.

This can all be made alot easier using something like jQuery... if you use that i can show you more complete code - hand coding in raw JS without a good library would be tedious...

Good luck!!