Laravel 5.4 - 基于另一个下拉选择值填充下拉菜单

Question

我希望从第一个下拉列表中选择一个值，然后根据第一个下拉列表自动填充另一个下拉列表。

我的观点：

<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')); 


} 

如何填充另一个下拉？任何想法？

Answer 1

你可以轻松地做一点点的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','YourControllerName@get_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>