How to populate a dropdownlist based on the selection made in another dropdownlist?

How do I automatically populate the second dropdown based on the selection made in the first one. Say if I choose a contry in the first dropdown, then I want to display a list of cities from that 开发者_开发技巧country in the second dropdown. Is there a way to do this with jQuery?

You have to use AJAX

$("#select1").change(function() {
    var optionId = $(this).val();
    $.post('ajax/getData.php',
           {id: optionId}, 
           function(data) {
              $("#div2").html(data);
           }, 
           "json"
    );
});

Here is example HTML:

<div id="div1">
    <select id="select1">
        <option value="1">aaaaa</option>
        ....
    </select>
</div>
<div id="div2">

</div>