Javascript 未定义jQuery代码.功能未被触发

我收到以下错误:

未捕获ReferenceError:未定义toggleOptionsVisibility 在HTMLSelectElement.onchange

我的Html:

    <div>
    <label asp-for="Type"></label>
    <select id="field-type" asp-for="Type" asp-items="Html.GetEnumSelectList<HourglassCopyEditor.Models.FieldType>()" onchange="javascript:toggleOptionsVisibility();"></select>
</div>

<div id="options-section" style="display: none;">
    <h3>Options</h3>
    <div id="options-container">
        @for (int i = 0; i < Model.Options.Count; i++)
        {
            <div class="option-item">
                <input type="hidden" asp-for="@Model.Options[i].Id" />
                <input type="hidden" asp-for="@Model.Options[i].FormFieldId" />
                <label asp-for="@Model.Options[i].Value">Option @(i + 1)</label>
                <input asp-for="@Model.Options[i].Value" />
                <button type="button" class="remove-option" data-option-id="@Model.Options[i].Id">Remove</button>
            </div>
        }
        <button type="button" id="add-option">Add Option</button>
    </div>
</div>

我的Java脚本/jQuery:

function toggleOptionsVisibility() {
    var selectedType = $('#field-type option:selected").text();
    if (selectedType == 2 || selectedType == 2 || selectedType == 3) {
        alert("show");
        $('#options-section').show();
    } else {
        alert("hide");
        $('#options-section').hide();
    }
}

我不明白为什么我的功能没有被唤醒.如有任何建议，我们将不胜感激.