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>