Я пытаюсь получить поле 'sigla' из файла JSON и поместить его в HTML-объект 'option', но оно отказывается работать должным образом ... надеюсь, что некоторые из вас могут помочь мне с этим!

Это образец файла 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>
1
L.Bravo 21 Дек 2019 в 05:59

2 ответа

Лучший ответ

Мне кажется, что вы извлекаете valEstados.sigla как объект или массив ($.each(valEstados.sigla), и у него есть значение, необходимое для установки options.

Кроме того, вы устанавливаете отключенную опцию и HTML-код select один раз для каждого data.estados, а не только один раз.

Это должно работать:

$.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);
});
0
jeprubio 21 Дек 2019 в 14:03

Вы пробовали использовать режим « для разработчиков » в вашем браузере , чтобы установить точки останова в коде для отладки это ? Например. на Firefox , в меню есть запись верхнего уровня в « Web Developer » -> « Debugger » .

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

 $.each(data.estados, function (keyEstados, valEstados){...

Должен соответствовать начальному списку

"estados": [...]

Тем не менее, я не думаю, что начиная со второго цикла

$.each(valEstados.sigla, function (keySigla, valSigla){

Необходим. Я думаю, что ваш код должен выглядеть примерно так:

$.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="' + valSigla + '">' + valSigla + '</option>';
    });
    $('#selection').html(output);
});    

( Не проверял, но это в основном избавляется от внутреннего контура ) .

0
Shaheed Haque 21 Дек 2019 в 03:33