Laravel 5.4 - 基于另一个下拉选择值填充下拉菜单
问题描述:
我希望从第一个下拉列表中选择一个值,然后根据第一个下拉列表自动填充另一个下拉列表。Laravel 5.4 - 基于另一个下拉选择值填充下拉菜单
我的观点:
<label for="category">Catégorie(s):</label>
{!! Form::select('category', $category,null, array('class' => 'form-
control')) !!}
<label for="brand">Marque:</label>
{!! Form::select('brand_name', $brand_name,null, array('class' => 'form-control')) !!}
我的控制器:
public function index()
{
$category = Category::pluck('categoryName', 'id');
$brand = Brand::pluck('brandName', 'id');
return view ('site.indexS',compact('brand','category'));
}
如何填充另一个下拉?任何想法?
答
你可以轻松地做一点点的Ajax,并获得方法。可能是你试图装入品牌依靠类别允许卷:
你的控制器:
public function index()
{
$category = Category::pluck('categoryName', 'id');
// no need to query brand here because we will load it depend on category
$brand = [];
return view ('site.indexS',compact('brand','category'));
}
//这里我们将在您的控制器中的另一个方法,该方法将返回品牌对象取决于类别ID
public get_brand($categpry_id){
// hope your brand table contain category_id or any name as you wish which act as foreign key
$brands= Brand::where('category_id',$category_id)
->pluck('brandName','id');
return json_encode($brands);
}
现在的路线,我们需要添加这个打这个网址:
Route::get('get-brand','[email protected]_brand');
In view: {{ - 我为这两个下拉列表都添加了id - }} 类型:
{!!形式::选择( '类别',$类别,null,数组( '编号'=> 'category_dropdown', '类'=> '形状配合 控制'))!}
<label for="brand">Marque:</label>
{!! Form::select('brand_name', $brand_name,null, array('id' => 'brand_dropdown','class' => 'form-control')) !!}
现在在我们需要用AJAX我们认为文件中,有我在这里
<script type="text/javascript">
var url = "{{url('/')}}";
</script>
<script type="text/javascript">
$('#category_dropdown').on('change', function() {
$('#brand_dropdown').empty();
var id = $('#category_dropdown').val();
$('#brand_dropdown').html('<option selected="selected" value="">Loading...</option>');
var url = url + '/get-brand/'+id;
$.ajax({
url: url,
type: "GET",
dataType: "json",
success:function(data) {
//console.log(data);
$('#brand_dropdown').html('<option selected="selected" value="">Select Brand</option>');
$.each(data, function(key, value) {
$('#brand_dropdown').append('<option value="'+key+'">'+value+'</option>');
});
}
});
});
</script>
宁愿AJAX请小心拼写或变量名其他许多方式,希望它会帮助你。 –