Laravel 5.2 Dynamic dropdown select not populating (javascript)

Question

I have two selects country, and information. The selected_country variable is passed to getInfo() which queries all rows matching that country and returns the deptname and id. The id is the option value in the select and is stored in the database,and deptname is the text displayed in the select. Right now my info dropdown is empty and I am not getting any errors.

public function getInfo()
{
    $country = Input::get('selected_country'); 
    $info = Department::where('addressCountry', $country)->orderBy('country')->pluck('deptname', 'id');
    return response()->json($info);

}

route

Route::get('related-info', ['as' => 'related-info', 'uses' => 'Auth\AuthController@getInfo']);

Javascript

$('#addressCountry').on('change', function (e) {
    var slots = $('#info');
    slots.empty();
    var selected_country = e.target.value;
    $.get("related-info?selected_country=" + selected_country, function (data) {
        slots.empty();
        console.log(data);
        $.each(data.slots, function (index, value) {
            slots.append('<option value="' + value.id + '">' + value.name + '</option>');
        });
    });
});

Relavent parts of my view

<form class="form-horizontal" role = "form" method = "POST" action = "{{ url('/register') }}" > {!!csrf_field() !!}

<select class="form-control" name = "addressCountry" id = "addressCountry" ></select >

<select class="form-control" name = "addressProv" id = "addressProv" ></select >

<select id="info" class="form-control" name="info">
   <option value=""></option>
</select>

Also in my view in the scrips section

populateCountries('addressCountry', 'addressProv');

The country and state drop downs are populated using a javascript file its too large to paste here http://pastebin.com/9XUTPEVY

EDIT: After returning a json response in getInfo instead of the view, if I navigate directly to related-info?selected_country=Ireland it will show the id and name of each one. If I goto /register and select Ireland in the dropdown the dropdown does not populate but the response tab in the network console in firedebug shows the id and name of each. I also changed console.log(data); to alert(data) the pop up says [object Object] when selecting Ireland.

Here are 3 screenshots of output http://imgur.com/a/jEfuu

Answer 1

All seems right except that you return a view instead of a Json object as response.

Try to replace:

return view('auth.register', ['info' => $info]);

With:

return response()->json($info);

Answer 2

Change the javascript code to this :

$('#addressCountry').on('change', function (e) {

var selected_country = e.target.value;

$.get('related-info?selected_country=' + selected_country, function (data) {
    console.log(data);
    $('#deptInfo').empty();
    $.each(data, function (index, subcatObj) {

        $('#info').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>');

    });
});

})

I see that when you are going directly to the url, you are going to : related-info?selected_country=Ireland but in javascript, you go to: related-info? country =' + selected_country but I guess you need to go to : related-info? selected_country