выпадающий список городов не заселен

Question

Я пытаюсь динамически загружать города в тег select в HTML.Я могу выбрать штат, а затем хочу загрузить город с помощью ajax-вызова.

Что касается консольной регистрации возвращаемых данных, она работает, я застрял в том, как я загружаю это в опцию выбора.теги.Пожалуйста, помогите.

<select name="state" class="state">
  <option value="" selected disabled>Choose State</option>
  <?php foreach ($states as $state) {
    echo "<option value='".$state->id."'>$state->name";
  }?>
</select>

<select name="city" class="city" id="city">
  <option value="" selected disabled>Choose City</option>
</select>

$.ajax({
    type: "POST",
    url: "includes/get_city.php",
    data: {
        state: selectedState
    },
}).done(function(data) {
    console.log(data); // Works when I console log

    //Don 't know if this is the way
    $('#city' > option).each(data, function(index, value) {

    });
}

Answer 1

Посмотрел видео онлайн и понял, что это один из способов сделать это.

$('#state').change(function() {
    var state_id = $('#state').val();
    $.ajax({
        url: 'includes/get_city.php',
        method: 'post',
        data: 'state_id=' + state_id
    }).done(function(cities) {
        console.log(cities);
        cities = JSON.parse(cities);
        $('#city').empty();
        cities.forEach(function(city) {
            $('#city').append('<option>' + city.name + '</option>');
        })
    });
});

Оцените все ответы.

Answer 2

Если ваш ответ ajax похож на коллекцию состояний в вашем коде, тогда вы можете использовать

var toAppend = '';
$.each(data, function(index, city){
toAppend += '<option value="'+city.id+'">'+city.name+'</option>';
});
$('#city').append(toAppend );  

Answer 3

Если вы получаете ответ json, попробуйте это:

$.ajax({
type: "POST",
url: "includes/get_city.php",
data: {
state: selectedState
},
dataType: "json"
}).done(function(data) {
$.each(JSON.parse(data), function () {
           $('#city').append('<option  value="'+data.id+'">'+data.name+'</option>');
                });
});

этот код

$('#city' > option).each(data, function(index, value) 

не будет работать, потому что не добавляет "опции", но ищет существующие

Вы также можете отладить его из Chrome (нажмите F12), чтобы проверить, есть ли у вас синтаксическая ошибка или что-то еще

Answer 4

Попробуйте это ( при условии, что индекс и значение используются правильно ):

var text = '';

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

$('#city').html(text);

// or you can use append to put value in select
$('#city').append(text);