Laravel 5.6 Dynamic Dropdown

Please am new in laravel, I would need your assistant on how to populate dynamic dropdown using laravel, currently, i tried doing this but is not working and i kept on receiving uncaught error below. Attached is what am doing. Thanks.

  //This is code in my CategoriesController.php
    public function index()
    {
        $categories = Category::all();

        $sub = [];

        return view('category', compact('categories', 'sub'));

    }

    public function get_sub($subid)
    {
        $subs = Subsategory::where('category_id', $subid)
            ->pluck('name', 'id');
        return json_encode($subs);
    }
This is my Route file

    Route::get('/category', 'CategoriesController@index');
    Route::get('get-sub', 'CategoriesController@get_sub');

And this is my blade file

    <label for="">Categories</label>
        <select class="form-control" name="category_dropdown" id="category_dropdown">
            @foreach($categories as $category)
                <option value=""></option>

            @endforeach
        </select>

        <label for="">Categories</label>
        <select class="form-control" name="subcategory" id="subcategory">
            <option value=""></option>
        </select>

<script type="text/javascript">
    var url = "";
</script>
<script type="text/javascript">

    $('#category_dropdown').on('change', function() {
        $('#subcategory').empty();
        var id = $('#category_dropdown').val();
        $('#subcategory').html('<option selected="selected" value="">Loading...
    </option>');
        var url = url + '/get-brand/'+id;
        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            success:function(data) {
                //console.log(data);
                $('#subcategory').html('<option selected="selected" 
    value="">Select Brand</option>');
                $.each(data, function(key, value) {

                    $('#subcategory').append('<option 
    value="'+key+'">'+value+'</option>');
                });

            }
        });
    });
   </script>

THe OUTPUT

Categories = list of Categories when user select a list the next drop box should change based on the list but however i kept seeing this error in my console = "Uncaught ReferenceError: $ is not defined at category:38 " and Failed to load resource: the server responded with a status of 404 (Not Found) srv1.clk-analytics.com/ Failed to load resource: net::ERR_INSECURE_RESPONSE

Please your input would be highly appreciated. Thanks all.

via Chebli Mohamed