javascript - 尝试在jQuery中使用JSON和JS时遇到问题

我正在尝试从JSON文件中获取字段“ sigla”，并将其放在HTML“选项对象”中，但是它拒绝按原样工作。.希望你们中的一些人能帮到我！

这是JSON文件的示例：

{
  "estados": [
    {
      "sigla": "AC",
      "nome": "Acre",
      "cidades": [
        "Acrelândia",
        "Assis Brasil"
      ]
    },
    {
      "sigla": "AL",
      "nome": "Alagoas",
      "cidades": [
        "Água Branca",
        "Anadia"
      ]
    }, ...
  ]
}

脚本：

<script>
$.getJSON("json/estados.json", function (data){
    $.each(data.estados, function (keyEstados, valEstados){
        var output = '';
        output += '<option value="" disabled="disabled" selected>UF</option>';
        $.each(valEstados.sigla, function (keySigla, valSigla){
            output += '<option value="' + valSigla + '">' + valSigla + '</option>';
        });
        $('#selection').html(output);
    });
});
</script>

它应适合的位置：

<div class="col-sm-6">
   <div class="inputBox">
      <div class="inputText">Selecione seu estado*
         <select id="selection" name="estado_php" required>
            <option value="" disabled="disabled" selected>UF</option>
         </select>
      </div>
   </div>
</div>

最佳答案

在我看来，您正在获取valEstados.sigla，因为它是对象或数组（$.each(valEstados.sigla)，并且它具有设置options所需的值。

除此之外，您还为每个data.estados设置了一个禁用选项和select的html，而不仅仅是一次。

这应该工作：

$.getJSON("json/estados.json", function (data) {
    var output = '';
    output += '<option value="" disabled="disabled" selected>UF</option>';
    $.each(data.estados, function (keyEstados, valEstados) {
        output += '<option value="' + valEstados.sigla + '">' + valEstados.sigla + '</option>';
    });
    $('#selection').html(output);
});