Question

我正在尝试将城市动态加载到HTML的select标签中。我可以选择州，然后通过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

尝试一下（假设索引和值的使用方式正确）：

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);

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

在线观看了一段视频，并认为这是一种实现方式。

$('#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>');
        })
    });
});

欣赏所有答案。

城市下拉列表未填充

4 个答案: