Dynamic Dependent Drop down box not working using ajax in laravel .

You don't need json_encode so

<?php

namespace App\Http\Controllers;

use App\State;
use App\Country;
use Illuminate\Http\Request;

class MainController extends Controller
{
    public function index()
    {
        $countries = Country::all();
        return view('index', compact('countries'));
    }

    public function getStates($id)
    {
        return State::where('country_id', $id)->pluck('name', 'id');
    }
}

@michaloravec should i remove that line. let me check

@michaloravec not working on that way too. :o

What do you get when you true console.log(data); inside ajax success method?

(index):47 Uncaught ReferenceError: JQuery is not defined
    at HTMLSelectElement.<anonymous> ((index):47)
    at HTMLSelectElement.dispatch (app.js:11800)
    at HTMLSelectElement.elemData.handle (app.js:11604)

but jquery is loaded already

Instead of jQuery or JQuery just use $

Like

$.ajax({
    // 
});

Also jquery has to be loaded before your code in <script> tag.

@michaloravec now there is no error in the console. but I didn't get my required results.

When you put that route to the browser what do you get?

@michaloravec an empty page no results.

@michaloravec I think code is ok there is no error. :D

@maaz Do you have data in your database for that id?

@michaloravec yes I have data in my countries and states table. I also make their relationship so there should be no problem.

@michaloravec thanks for you precious time buddy, it will be great if you solve my this problem :)

If you run this in browser you should get some data, for country with id 1.

http://example.com/getStates/1

Of course replace example.com woth what you use.

If you don't get data check your db connection, etc.

@michaloravec

 public function getStates($id)
    {

        $states = State::where('country_id', $id)->pluck('name', 'id');
        dd($states);
    }

i am getting data when i visit the /getStates/1

@michaloravec i just done it by adding this to my code.

  public function getStates($id)
    {

        $states = State::where('country_id', $id)->pluck('name', 'id');
        return response()->json($states);
    }
}

return resonse()->json($state) it works

<script>
    $(function() {
        $('select[name="country"]').on('change', function () {
            var countryID = $(this).val();

            if (countryID) {
                $.get('/getStates/' + countryID, function(data) {
                    $('select[name="state"]').empty();

                    $.each(data,function(key, value) {
                        $('select[name="state"]').append('<option value="' + key + '">' + value + '</option>');
                    });
                }, 'json');
            } else {
                $('select[name="state"]').empty();
            }
        });
    });
</script>

Just this should return json, but great if it works.

return State::where('country_id', $id)->pluck('name', 'id');

@michaloravec if it works don't touch it haha. by the way thanks a lot @michaloravec :)