Dynamic dropdown in laravel 5.3 with jquery don't work

I am tryring to dynamically populate the constituencies in the constituency dropdown menu depending on the county selected in the first (counties) drop down. Only constituencies in the selected county should be listed in the constituencies dropdown otherwise the constituencies dropdown is empty. I have the constituencies in the database with county_id as FK. Nothing seem to happen when the county is selected. Chrome console pointing to $.ajax as anonymous and the url seem to fail even I opt to use named route. This is my laravel blade form: My Form

<!--County select menu-->
{!! Form::open(array('route' => 'members.store', 
'method'=>'post', 'class' => 'form','files'=>true )) !!}
<div class="form-group">
{!! Form::label('County') !!}
{!! Form::select('county_id',$counties,null, ['id'=>'county'],
array('require','class'=>'form-control',
    'placeholder'=>'Select County',
    'value'=>"" ))!!}
</div>
<!--Constituencies drop down menu to populated with constituencies in the county selected-->
<div class="form-group">
    <label>Constituencies
        <select id="const" name="const" class="form-control input-sm" name="city_id">
            <option value=""></option>
       </select>
    </label>
</div>

<div class="form-group">
    {!! Form::submit('Save', 
      array('class'=>'btn btn-primary')) !!}
</div>
{!! Form::close() !!}
</div>

<!--Jquery include-->
 <script src="http://localhost/app/public/js/jquery-1.10.2.min.js"></script>

Jquery Code

<!--Jquery Code-->
<script type="text/javascript">

    $(document).ready(
        function()
        {
           $('select[name="county_id"]').on('change',
           function()
           {
            var county_id =$(this).val();
            if(county_id)
            {
            var url ='{!!route("consts")!!}'+county_id;

            $.ajax({
                url:url,
                type:"GET",
                dataType:"json",

                success:function(data)
                {
                    $('select[name="const"]').empty();
                    $.each(data,
                        function(key,value)
                        {
                            $('select[name="const"]').append('<option value="'+key+'">'+value+'<option>');
                        });
                }

            });
        }
        else
        {
            $('select[name="const"]').empty();
        }


           }) ;
        });

        </script>

Laravel Route

<!--   Laravel route-->

     Route::get('/constituency/',['as'=>'consts','uses'=>'AjaxRequestsController@constituencies']);

My controller Method

<!--Controller Method in AjaxRequestsController-->
      public function constituencies($id)
    {
        $constituencies = Constituency::where('county_id',$id)->pluck('const_name','id');

        return json_decode($constituencies);

    }

Model relationships

//The Constiuency model relationship
    public function county()
    {
        return $this->belongsTo('App\County');
    }
    //The County model relationship

    public function constituency()
    {
        return $this->hasMany('App\Constituency');
    }

The console returns

Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-1.10.2.min.js:6 GET http://localhost/constituency/9 404 (Not Found)
Error details:
    send    @   jquery-1.10.2.min.js:6
ajax    @   jquery-1.10.2.min.js:6
(anonymous) @   create:834
dispatch    @   jquery-1.10.2.min.js:5
v.handle    @   jquery-1.10.2.min.js:5
ListPicker._handleMouseUp   @   about:blank:720
line 834 contains this line of jquery code:

$.ajax({

what am I doing wrong. Kindly assist.

via Chebli Mohamed