Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lewanay's avatar

Dependent dropdown using ajax in laravel

Hello :) I have a dropdown for students_id. Now I want to track the student name and class from another table when someone select any student id. I did something for that using ajax. Its not showing me any error in the console but just giving me null array and I think thats the problem related to the query. You can check my code below. :)

I have a dropdown for students_id. Now I want to track the student name and class from another table when someone select any student id. I did something for that using ajax. Its not showing me any error in the console but just giving me null array and I think thats the problem related to the query. You can check my code below. :)

//Controller

public function create() { $students = Student::pluck('student_id', 'id')->all(); return view('admin.reports.create', compact('students')); }

public function reportsAjax(Request $request) {
    $students = DB::table("students")->where("student_id", $request->student_id)->pluck("student_id","id");
    return json_encode($students);
}

//View and Ajax

                    <label for="title">Select Student <span style="color: red">*</span></label>

                    <select name="student_id" class="form-control bg-dark text-white" >

                        <option>Select Student</option>

                        @foreach ($students as $key => $value)

                            <option value="{{ $key }}">{{ $value }}</option>

                        @endforeach

                    </select>

                </div>
                <div class="form-group">
                    <label class="control-label">Student Full Name <span style="color: red">*</span></label>
                    <input name="std_name" type="text" required class="form-control" />
                </div>
                <div class="form-group">
                    <label class="control-label">Class <span style="color: red">*</span></label>
                    <input name="std_class" type="text" required class="form-control" />
                </div>
    $(document).ready(function() {

        $('select[name="student_id"]').on('change', function() {

            var studentInfo = $(this).val();

            if(studentInfo) {

                $.ajax({

                    url: '/reports/ajax/'+studentInfo,

                    type: "GET",

                    dataType: "json",

                    success:function(data) {

                        $('input[name="std_name"]').empty();

                        $.each(data, function(key, value) {

                            $('select[name="std_name"]').append('<input  value="'+ key +'">'+ value +'/>');

                        });


                    }

                });

            }else{

                $('select[name="std_name"]').empty();

            }

        });

    });

</script>

//Routes

Route::get('reports/ajax/{id}',array('as'=>'reports.ajax','uses'=>'ReportController@reportsAjax'));

Route::resource('admin/reports', 'ReportController', ['names'=>[

'index'=>'admin.reports.index',
'create'=>'admin.reports.create',

]]);

0 likes
2 replies
Punksolid's avatar

hi @lewanay first make sure you're having the json response right

In chrome go to the developer tools > Network > Select the XHR filter, and refresh the page If the request is done it will appear as a row on the left, then select the request, and go to preview, there you will see the response as it is receiving it the browser.

**The response has any info or is responding null? **

Please or to participate in this conversation.