更新オプションは、AjaxとLaravelの助けを借りて他の選択タグに従って属性を選択しますか？

Question

私は選択タグを持っており、一連のオプションは、その値と内部テキストがデータベースに格納された属性を選択します。

これ

は、合計で各selectタグ、2のためのforeachを呼び出すことで、私はビューのデータを表示しています方法です：

{!! Form::label('category_id', 'Category:') !!} 
<select class="form-control category_id" name="category_id"> 
    @foreach($categories as $category) 
     <option value='{{ $category->id }}'> {{ $category->name }}</option> 
    @endforeach 
</select> 

{!! Form::label('subcategory_id', 'Subcategory:') !!} 
<select class="form-control" name="subcategory_id" label="Subcategory"> 
    @foreach($subcategories as $subcategory) 
     <option value='{{ $subcategory->id }}'> {{ $subcategory->name }}</option> 
    @endforeach 
</select> 

問題は、私は次のような考え方で立ち往生していますということです。カテゴリとサブカテゴリは1対多の関係にあります。つまり、ユーザーが特定のカテゴリをクリックすると、選択されたサブカテゴリには、選択したカテゴリにリンクされた値のみが入力されます。

この問題の解決策を見つけるにはどうすればよいですか、私はajaxリクエストを作成することを考えていますが、オプション選択属性を設定する方法を理解できません。または、サブカテゴリーを格納するJSON（フロントエンド上のすべての作業）変数を作成し、ユーザーが選択したカテゴリーに応じて選択タグを更新するだけです。

ご協力いただきますようお願い申し上げます。

SOLUTION：

VIEW：

{!! Form::label('category_id', 'Category:') !!} 
<select class="form-control" id="categories" name="category_id"> 
    @foreach($categories as $category) 
     <option value='{{ $category->id }}'> {{ $category->name }}</option> 
    @endforeach 
</select> 

<div id="displayCategories" style="display:none"> 
    {!! Form::label('subcategory_id', 'Subcategory:') !!} 
    <select class="form-control" id="subcategories" name="subcategory_id" label="Subcategory"> 
     @foreach($subcategories as $subcategory) 
      <option value='{{ $subcategory->id }}'> {{ $subcategory->name }}</option> 
     @endforeach 
    </select> 
</div> 

JS & jQueryのAJAX &：

<script 
src="https://code.jquery.com/jquery-3.1.1.js" 
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
crossorigin="anonymous"></script> 

<script> 
$('#categories').on('change',function(e) { 
    var cat_id = e.target.value; 
    //ajax 
    $.ajax({ 
     url: '../ajax-subcat/{cat_id}', //note:that the path can be different for different purpose used, in a simple page -> '/ajax-subcat/{cat_id}' so use the console of your browser 
     type: 'GET', 
     data: {cat_id : cat_id}, 
     success: function(response) 
     { 
      $('#subcategories').empty(); 
      $('#displayCategories').show(); 
      $.each(response, function(index, subcatObj) { 
       $('#subcategories').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>'); 
       console.log(subcatObj); 
      }); 
     } 
    }); 
}); 
</script> 

ROUTE：

Route::get('ajax-subcat/{cat_id}', 'PostController@getAjax'); 

CONTROLLER：

public function getAjax() 
{ 
    $cat_id = Input::get('cat_id'); 
    $subcategories = Subcategory::where('category_id', '=', $cat_id)->get(); 
    return Response::json($subcategories); 
} 

は、コントローラに対応するモデルを導入するための入力と応答のためのファサードを忘れないでください。私の場合は：

use Illuminate\Support\Facades\Input; 
use Illuminate\Http\Request; 
use Illuminate\Support\Facades\Response; 
use App\Category; 
use App\Subcategory; 

Answer 1

あなたはので、多分若干異なる実装を使用してLaravelあなたのバージョンを言及していません。あなたはajaxメソッドでそれを行うことができます。フロントエンド呼び出しのためにAxiosを調べることができますが、ユーザーが新しい選択を行ったときのselect要素にイベントリスナーを設定する必要があります。