10 months ago

Dynamic Dependant Select Box

Posted 10 months ago by Nosean

Hello Guys

I will create an Dynamic Dependant Select Box View.

My HomeController:

 public function index()
        // Alle Kategorien werden geladen
       $categories = DB::table('categories')->pluck("category_name", "id")->all();
       return view('home', compact('categories'));

    public function subcategories (Request $request) {
            $under_categories = DB::table('under_categories')->where('categorie_id',$request->categorie_id)->get();
            $data = view('sections.searchtron',compact('under_categories'))->render();
            return response()->json(['options'=>$data]);

My View:

           {!! Form::open() !!}
                <div class="row align-items-end">
                    <div class="col">
                        <label for="categorie">Kategorie</label>
                            {!! Form::select('categorie',[''=>'--- Select Country ---']+categories,null,['class'=>'form-control', 'id'=>'categorie']) !!}

                    <div class="col">
                        <label for="subcategorie">Maschinenart</label>
                        <select class="form-control" name="subcategorie" id="subcategorie">
                            <option value="any">Beliebig</option>
                                @foreach($states as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>

                    <div class="col">
                        <label for="manufacturer">Maschinenart</label>
                        <select class="form-control" disabled name="manufacturer">
                            <option value="any">Beliebig</option>
                            <option value=""></option>
                    <div class="col ">
                        <input type="submit" class="form-control btn btn-success" name="search" value="Suchen">

                <input type="hidden" name="_token" value="{{ csrf_token() }}">
            {!! Form::close() !!}

And my JS:

$(document).ready(function() {

    $("select[name='categorie'").change(function () {
        var categorie_id = $(this).val();
        var token = $("input[name='_token']").val();
            url: "/subcategorie",
            method: 'POST',
            data: {categorie_id: categorie_id, _token: token},
            success: function (data) {


Anyone can help??


Please sign in or create an account to participate in this conversation.