Jquery populate selection list

I'm using Jquery and Ajax function to get data from MySql and put it in a div where can I select them.

It works like this:

When I select a country from the list Jquery runs a function to display a list of cities in selected country using getJson. That list is displayed in "inputString" div.

Now I want to show the same data in a html select form, not in a DIV as it is right now.

The HTML looks like:

<select name="country" id="country" class="country">
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="serbia"&g开发者_开发问答t;Serbia</option>
</select>

<input size="30" id="inputString" type="text" name="inputString"  class="inp"/>
<div class="suggestionList" id="autoSuggestionsList"></div>

Jquery:

$(document).ready(function () {
    $("#inputString").keyup(function () { // inputString is DIV where list of cities are listed
        var up_country = $("#country option:selected").val();
        $.getJSON("cities.php?queryString=" + up_country + "", function (data) {
            if (data.length > 0) {
                $.each(data, function (i, data) {
                    var city = data.city;
                    if (i < 19) {
                        $('#autoSuggestionsList').append('<li class="k' + i + '">' + city + '</li>');
                    }
                });
            }
        });
    });
});

How can I display the list of cities of the selected country in html select form like this one below if the select country was UK?

  <select name="city" id="city" class="city">
  <option value='London'>London</option>
  <option value='Manchester'>Manchester</option>
  <option value='Salford'>Salford</option>
  </select>

$('#country').after('<select name="city" id="city" class="city"/>');
$.each(data, function(index, datum){
    $('#city').append($('<option/>').val(datum).text(datum));
});

try something like that-
in your html:

<select name="city" id="city" ></select>

and your jQuery code:

$.each(data, function(i, data){
var city = data.city;
if(i < 19){
$('#city').append('<option>'+ city+ '</option>');

       }
}

<select class="suggestionList" id="autoSuggestionsList"></select>
<script>
$.getJSON("cities.php?queryString=" + up_country +"", function(data) { 
  var content = '';

  $.each(data, function(){
    content += '<option value="' + this.city + '">' + this.city + '</option>';
  });

  $('#autoSuggestionsList').html(content);
});
</script>

The response from php can be a form or any other html content. You can load html from php if you don't necessarily need to populate the list with jquery

--for example--

response from php

echo '<form>
       <select>
            <option>London</option>
            <option>Manchester</option>
            <option>Salford</option>
       </select>
      </form>
';

ajax loaded content

$('#citiesList').html(data);