javascript - 尝试将 JSON 和 JS 与 jQuery 结合使用时遇到问题

Question

我正在尝试从 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>

Answer 1

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

除此之外，您还为每个 data.estados 设置了一次禁用选项和选择的 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);
});