php - Ajax 成功响应并选择附加选项

Question

我正在尝试进行 ajax 调用以从我的数据库中获取国家/地区列表。以下是部分代码:

country.php:

while ($country = $stmt->fetch(PDO::FETCH_ASSOC)) {
$data[] = $country['country'];
   }
echo json_encode(array("response"=>$data));
}    

我收到如下回复:

{"response":["Afghanistan","Albania","Algeria","American-Samoa","Andorra","Angola"......

Ajax代码:

//country select
$( "#country" ).focus(function() {
$.ajax({
url: 'country.php',
dataType: 'json',
contentType: 'application/json',
success: function(data) {
//console.log(data);
var formoption = "";
$.each(data, function(v)
{
var val = data[v];
formoption += "<option value='"+val+"'>"+val+"</option>";
});

$('#countries').append(formoption);
      }
   });
});

形式为:

<select id="country" name="country" class="form_input required">
<div id="countries"></div>
</select>

不知何故它不起作用，我找不到原因。请注意，我是 JavaScript 新手。我将其用作 Framework7 代码的一部分。

期待专家的帮助。

Answer 1

使用$('#countries').append(formoption);

并删除 select 标签内的 div 标签并将 select id 更改为国家，使用下面的 html

<select id="countries" name="countries" class="form_input required">
</select>

您将选项包装在 div 标记中，所以这不是正确的 html。选项应直接附加到选择标签。

引用下面的示例代码

$(function() {
  var resultFromAjax = {response: ["Afghanistan", "Albania", "Algeria", "American-Samoa", "Andorra", "Angola"]}
  var data = resultFromAjax.response

  var formoption = "";
  $.each(data, function(v) {
    var val = data[v]
    formoption += "<option value='" + val + "'>" + val + "</option>";
  });
  $('#countries').html(formoption);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="countries" name="country" class="form_input required">
</select>