Estoy trabajando en un proyecto con Laravel 8, donde necesito hacer 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.
<label for="store_id">Store</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">Parent Category</label> <select id="parent_category" name="parent_category" class="custom-select"> </select>| identificación | store_id | parent_category_id | nombre |
|---|
| identificación | nombre |
|---|
public function create() { $stores = Store::all(); $categories = Category::all(); $data= [ 'stores ' => $stores , 'categories ' => $categories ]; return view('category.create')->with($data); }Puede lograr este enfoque con jQuery:
obtenga categorías de tiendas a través de la relación, dependiendo de su tipo de relación Uno a muchos, Muchos a muchos, etc.:
public function Storecategories() { return $this->hasMany('App/Models/Categories','store_id'); }En su función de controlador y obtenga categorías de tiendas:
//return store categories with ajax response using relationship $store_categories = StoreModel::find($store_id)->Storecategories() //if any where clause you want to add ->where('Your conditions') ->get(); return response()->json(['store_categories'=>$store_categories->toArray() ]);Envíe una solicitud ajax al seleccionar la tienda, obtenga una matriz de categorías y cree categorías html dinámicamente:
//Perform action on selection of store $(document).on('change','#store_id',function(){ $.ajax({ type: "POST", url: Your ajax url, data[store_id:stroe_id , _token:token], success: function (data) { let categories = data.store_categories; let html = ''; $.each(categories ,function(i,v){ html += '<option value="'+v.id+'">'+v.name+'</option>'; }); $("#parent_category").html(html); } }); });