JQuery code is not defined. Function not being triggered

Question

I am getting the following error:

Uncaught ReferenceError: toggleOptionsVisibility is not defined at HTMLSelectElement.onchange

My 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>

My Javascript/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();
    }
}

I don't understand why my function isn't being calkled. Any suggestions would be appreciated.

Answer 1

Seems like you have an error in you script. Try replace

var selectedType = $('#field-type option:selected").text();

by

var selectedType = $('#field-type option:selected').text();

And to define the onchange event handler you can use the following syntax:

onchange="toggleOptionsVisibility();"