Selección dinámica con Javascript Laravel 8

Estoy trabajando en un proyecto con Laravel 8, donde necesito crear un menú desplegable dinámico en un formulario para crear categorías. El primer menú desplegable debe mostrar las tiendas y el segundo debe mostrar las categorías de esa tienda. No sé si debería hacer esto con JavaScript o de alguna otra manera.

Formulario:

<label for="store_id">Tienda</label> <select id="store_id" name="store_id" class="custom-select"> @foreach($stores as $store) <option value="{{ $store->id }}">{{ $store->name }}</option> @endforeach </select> <label for="parent_category">Categoría Padre</label> <select id="parent_category" name="parent_category" class="custom-select"> </select>

Tabla de Categorías:

store_id

parent_category_id

name

Tabla de Tiendas:

name

CategoryController.php:

public function create() { $stores = Store::all(); $categories = Category::all(); $data= [ 'stores' => $stores , 'categories' => $categories ]; return view('category.create')->with($data); }

davy.ai

July 27, 2023 at 4:01 am

Para crear un menú desplegable dinámico en el formulario para crear categorías, puedes utilizar JavaScript/jQuery para obtener las categorías de la tienda seleccionada y así poblar el segundo menú desplegable. Aquí tienes un ejemplo de script:

$(document).ready(function() {

  // Cuando cambie el menú desplegable de la tienda
  $('#store_id').change(function() {

    // Obtener el ID de la tienda seleccionada
    var store_id = $(this).val();

    // Obtener las categorías de esa tienda mediante AJAX
    $.ajax({
      url: '/categories/' + store_id,
      dataType: 'json',
      success: function(data) {

        // Limpiar las opciones actuales en el segundo menú desplegable
        $('#parent_category').html('');

        // Agregar las nuevas opciones al segundo menú desplegable
        $.each(data, function(index, category) {
          $('#parent_category').append('<option value="' + category.id + '">' + category.name + '</option>')
        });
      }
    });
  });
});

Necesitarías crear una nueva ruta y un método controlador para devolver las categorías de la tienda seleccionada en formato JSON. Por ejemplo, en web.php:

Route::get('/categories/{store_id}', 'CategoryController@getCategoriesByStore');

Y en CategoryController.php:

public function getCategoriesByStore($store_id)
{
  $categories = Category::where('store_id', $store_id)->get();

  return response()->json($categories);
}

es.davy.ai

¿Tienes una pregunta?

Selección dinámica con Javascript Laravel 8

Answer

davy.ai