Binding dropdownlist using javascript

Please support our ASP.NET advertiser: Intel Parallel Studio Home
Reply

Join Date: Sep 2007
Posts: 28
Reputation: nice_true is an unknown quantity at this point 
Solved Threads: 0
nice_true nice_true is offline Offline
Light Poster

Binding dropdownlist using javascript

 
0
  #1
Sep 29th, 2008
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
Reply With Quote Quick reply to this message  
Join Date: Sep 2008
Posts: 10
Reputation: kburb23 is an unknown quantity at this point 
Solved Threads: 2
kburb23 kburb23 is offline Offline
Newbie Poster

Re: Binding dropdownlist using javascript

 
0
  #2
Sep 30th, 2008
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?
Reply With Quote Quick reply to this message  
Join Date: Sep 2008
Posts: 10
Reputation: kburb23 is an unknown quantity at this point 
Solved Threads: 2
kburb23 kburb23 is offline Offline
Newbie Poster

Re: Binding dropdownlist using javascript

 
0
  #3
Sep 30th, 2008
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!!
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the ASP.NET Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC