Using a select box to retrieve values from the database and to save the result in an another select box

Using a select box to retrieve values from the database and to save the result in an another select box

Hi,

      I have two select boxes: one is country and the other one is cities.
When the user selects a country, the appropriate cities for that country should be populated in the "cities" from the database.

I am new to jquery and javascript and i am not sure how to implement this. It will be appreciated if someone gives me a sample code for performing this functionality.

I am using this in one of my forms  in django framework which is implemented in python.

Thank you in advance


<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select name="country" id="country">
    <option value = "india">india</option>
    <option value = "USA">USA</option>
    <option value = "UK">UK</option>
    <option value = "China">China</option>
    <option value = "Sweden">Sweden</option>
    <option value = "Germany">Germany</option>
  </select>

  <select name="cities" id="cities">
  <option value = ""></option>
  </select>  
  <div></div>  

</body>
</html>