0
124
VistasCambie las opciones de selección con otra selección usando datos JSON - JQuery
Tengo datos json que se ven así:
[{ "id": 9, "category": "Baby", "items": "[{\"value\":\"Baby Foods\"}]", "created_at": "2022-01-08T14:28:48.000000Z", "updated_at": "2022-01-08T14:28:48.000000Z", "deleted_at": null }, { "id": 10, "category": "Adult", "items": "[{\"value\":\"Adult Clothes\"},{\"value\":\"Adult Bags\"},{\"value\":\"Adult Shoes\"}]", "created_at": "2022-01-09T10:46:34.000000Z", "updated_at": "2022-01-09T10:46:34.000000Z", "deleted_at": null }]Tiene una lista de categorías con sus artículos. Ahora, lo que estoy tratando de hacer ahora es completar esos datos en los cuadros de selección de manera que si una categoría de cambio de usuario consultada desde JSON mostrará elementos (como se muestra en JSON) en otro cuadro de selección como opciones que pertenecen a esa categoría seleccionada.
Esto es lo que he intentado hasta ahora usando jquery:
let dropdown = $('#category'); dropdown.empty(); dropdown.append('<option selected="true" disabled>Choose</option>'); dropdown.prop('selectedIndex', 0); const url = 'http://localhost:8000/admin/categories/show'; // Populate dropdown with list of categories $.getJSON(url, function (data) { $.each(data, function (key, entry) { dropdown.append($('<option></option>').attr('value', entry.category).text(entry.category)); }) });Aquí está el resultado que muestra perfectamente las categorías en el cuadro de selección de categoría:
No tengo idea de cómo obtener elementos si se selecciona cierta categoría en otro cuadro de selección (el segundo), cualquier ayuda será muy apreciada.
1 Respuestas
Responde la pregunta0
Puede definir un eventHandler para su evento de change de categoría, y cada vez que cambie, puede leer elementos relacionados de los datos de origen y colocar elementos en la opción de destino, así:
let data = [{ "category": "Baby", "items": "[{\"value\":\"Baby Foods\"}]", }, { "category": "Adult", "items": "[{\"value\":\"Adult Clothes\"},{\"value\":\"Adult Bags\"},{\"value\":\"Adult Shoes\"}]", } ] let categories = $('#category'); let items = $('#items') function fillDropdown(target, {data, prop}) { $.each(data, function(key, data) { target.append($('<option></option>').attr('value', data[prop]).text(data[prop])); }) } fillDropdown(categories, {data, prop: 'category'}) categories.on('change', function(e) { items.html(''); let value = $(this).val(); if (value) { let dataItem = data.find(v => v.category == value); const options = JSON.parse(dataItem.items); fillDropdown(items, {data: options, prop: 'value'}) } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="category"> <option></option> </select> <select id="items"></select>