json 数组中以单个选项而不是多个选项显示的数据

Question

我在 JSON 文件中有一个 JSON 数组，如下所示：

{
"states": [
    {
        "state": "Andhra Pradesh",
        "districts": [
            "Anantapur",
            "Chittoor",
            "East Godavari",
            "Guntur",
            "Krishna",
            "Kurnool",
            "Nellore",
            "Prakasam",
            "Srikakulam",
            "Visakhapatnam",
            "Vizianagaram",
            "West Godavari",
            "YSR Kadapa"]
        
        }
    ]
}

并且我能够成功地加载 select 元素中的所有状态作为依赖 select 选项 .当我 select 来自 select 元素的状态时，它会填充区域 select 元素中的相关数组。但不是数组显示单独的选项，而是显示为一个选项：

我应该以不同的格式修改我的 JSON 数组吗？

jquery

$('#statePicker').on('change', function() {            
        $("#cityPicker").html('');
        $.ajax({
            url: "{{ asset('json/in-sc-list.json') }}",
            type: "GET",               
            dataType: 'json',
            success: function(res) {                    
                    $('#cityPicker').html('<option value="">Select City</option>');
                    
                    $.each(res.states, function(key, value) { 
                        if (value.state == $('#statePicker').val()) {
                            console.log(value.districts);
                        $("#cityPicker").append('<option value="' + value
                            .districts + '">' + value.districts + '</option>');
                        }
                    });                    
               }
         });
    });

blade

<span>
     <select id="statePicker" name="statePicker" required class="form-control"></select>    
      <select id="cityPicker" name="cityPicker" required class="form-control"></select>          
</span>

Answer 1

你的数据结构没问题。问题是您没有创建多个选项元素，您只创建了一个。此部分已关闭：

$("#cityPicker").append('<option value="' + value
                            .districts + '">' + value.districts + '</option>');
                        }

你要做的是为每个分区创建一个option元素，如下：

for (const district of value.districts) {
  $("#cityPicker").append('<option value="' + district + '">' + district + '</option>');
}

Answer 2

let statePicker = $('#statePicker').val();
let list = $("#cityPicker");
$.each(res.states, function(key, value) { 
    if (value.state == statePicker) {
        $.each(items, function(item) {
          list.append(new Option(item, item));
        });
    }
});

你需要循环 value.districts 因为它是一个数组，而且你正在以一种肮脏的方式进行循环，你在每个循环中初始化 $("#cityPicker")，这可能会带来一些性能问题未来如果列表项增加。

json 数组中以单个选项而不是多个选项显示的数据

data showing in single option instead of multiple option from json array

javascript

php

jquery

json

laravel