how to populate a select dropdownlist using jQuery and Ajax

Question

Hi,

I have 2 html dropdown lists labeled namely: Country and City , as given below:

(Note: It has css class associated with it)

 

<select id="Country"  class="dropdown">
<option class="options"></option>
</select>

 

<select id="City"  class="dropdown">
<option class="options"></option>
</select>

 

My Database is in SQL Server. And my development environment is Visual Studio 2010.

My database Details:
Table Name: Country_City

Table view:

Country	City
India	Mumbai
India	Hyderabad
USA	New york
USA	California

 

My objective:

I have to populate Country Dropdownlist from database using jquer-ajax call.Then on selecting a country the respective cities of that country should be visible in the "City" Dropdownlist.

 

Please provide the code for the same.

 

Thanks,