Problem with script not rendering from layout

I have an MVC5 application which I am converting to MVC Core.

I have used the default Layout with the coding

<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>

...

@RenderSection("Scripts", required: false)

I then have a view with a script in the Header Section to set up a JQuery event handler on a drop-down list

@section Head
{

<script type="text/javascript">

$(document).ready(function () {

// Set up event handler on drop-down list

$('#ddlType').change(function (event) {
$.get('@Url.Action("Documents","Members")', { id: $(event.target).val() },
function (response) {
$('#DocumentList').html(response); }
);
});
});

</script>
}

The problem is that the event handler is not triggered when I select a choice from the drop-down box.  Using the Chrome Development Tools, I can see the message that $ is not recognised, so JQuery has not loaded when the $(document).ready(function () executes. If I insert the script <script src="~/lib/jquery/dist/jquery.js"></script> in the header section before the document.ready function, then the event handler is set up.

I am very confused.  If the JQuery script is in the layout file, why should I need another script to load JQuery in the view

What am I doing wrong, and how should I do it?

Any help would be appreciated, as I am not that experienced.

David