0
123
Vistasdatos que se muestran en una opción única en lugar de una opción múltiple de la matriz json
Tengo una matriz JSON en un archivo JSON que se parece a esto:
{ "states": [ { "state": "Andhra Pradesh", "districts": [ "Anantapur", "Chittoor", "East Godavari", "Guntur", "Krishna", "Kurnool", "Nellore", "Prakasam", "Srikakulam", "Visakhapatnam", "Vizianagaram", "West Godavari", "YSR Kadapa"] } ] }y puedo cargar con éxito todos los estados en el elemento de selección como una opción de selección dependiente. cuando selecciono un estado de un elemento de selección, llena una matriz relacionada en el elemento de selección del distrito. pero en lugar de que la matriz muestre una opción separada, se muestra como una opción:
¿Debo modificar mi matriz JSON en un formato diferente?
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>'); } }); } }); });espada
<span> <select id="statePicker" name="statePicker" required class="form-control"></select> <select id="cityPicker" name="cityPicker" required class="form-control"></select> </span>2 Respuestas
Responde la pregunta0
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)); }); } }); Debe hacer un bucle de value.districts porque es una matriz y, además, lo está haciendo de una manera sucia, está inicializando $("#cityPicker") en cada bucle. Esto podría generar algunos problemas de rendimiento en el futuro si los elementos de la lista aumenta
0
Su estructura de datos está bien. El problema es que no está creando elementos de opciones múltiples, solo está creando uno. Esta parte está desactivada:
$("#cityPicker").append('<option value="' + value .districts + '">' + value.districts + '</option>'); }Lo que desea hacer es crear un elemento de opción para cada distrito, de la siguiente manera:
for (const district of value.districts) { $("#cityPicker").append('<option value="' + district + '">' + district + '</option>'); }