Question

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">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>

Answer 1

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