Nosean
5 months ago

Dynamic Dependant Select Box

Posted 5 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) {
        if($request->ajax()){
            $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>
                    <div class="col">
                        <label for="subcategorie">Maschinenart</label>
                        <select class="form-control" name="subcategorie" id="subcategorie">
                            <option value="any">Beliebig</option>
                            @if(!empty($data))
                                @foreach($states as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            @endif

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

                <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();
        $.ajax({
            url: "/subcategorie",
            method: 'POST',
            data: {categorie_id: categorie_id, _token: token},
            success: function (data) {
                $("select[name='subcategorie'").html('');
                $("select[name='subcategorie'").html(data.options);
            }
        });
    });

});

Anyone can help??

Thx

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