使用 Javascript Laravel 8 动态选择

Question

我正在使用 Laravel 8 开发一个项目，我需要在表单中创建一个动态下拉列表来创建类别。第一个下拉菜单必须显示商店，第二个下拉菜单应显示该商店的类别。我不知道我是否应该使用 javascript 或其他方式来执行此操作。

表格：

<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>

类别表

id	store_id	parent_category_id	name

存储表

id	name

CategoryController.php

public function create()
{              
  $stores = Store::all();
  $categories = Category::all();                    

  $data= [            
    'stores ' => $stores ,
    'categories ' => $categories 
  ];

return view('category.create')->with($data);
}

Answer 1

您可以使用 jQuery 实现这种方法：

通过关系获取商店类别，具体取决于您的关系类型一对多、多对多等：

public function Storecategories()
{
    return $this->hasMany('App/Models/Categories','store_id');
}

在您的控制器功能中并获取商店类别：

//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() ]);

在选择商店时发送ajax请求，获取类别数组并动态创建类别html：

//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);
            }
        });
});