Скрытие элемента до тех пор, пока не будет сделан выбор

Question

Внутри формы в представлении Razor у меня есть следующие элементы:

<div class="form-group">
     <label asp-for="Published"></label><span style="color:red">*</span>
     <select asp-for="Published"
             asp-items="Model.PublishList"
             class="form-control" id="pub" onchange="hideRegen()" ></select>
     <span asp-validation-for="Published" class="invalid-feedback"></span>
</div>
<div class="form-group" id="regen" hidden>
     <label asp-for="Regenerate"></label><span style="color:red">*</span>
     <select asp-for="Regenerate"
             asp-items="Model.Regenerates"
             class="form-control" onchange="this.form.submit()"></select>
     <span asp-validation-for="Regenerate" class="invalid-feedback"></span>
</div>

А в элементе скрипта у меня есть следующая функция:

<script>
    (function hideRegen() {
        var pub = document.getElementById("pub");
        var regen = document.getElementById("regen");
        if (pub.options[pub.selectedIndex].text == "No") {
            regen.show();
        }
        this.form.submit();
    });
</script>

Оба * 1007 Элементы * select отображают элементы из списка, содержащего «Да», «Нет» и «». Второй div должен быть скрыт, пока первый элемент не будет изменен на «Нет».

Когда я тестирую этот код в IIS, ничего не происходит. Когда я попробовал это в JSFiddle, я получил сообщение об ошибке «Uncaught ReferenceError: hideRegen is not defined.»

Я проверил другие вопросы здесь для этой ошибки и не могу понять, почему это происходит. Область должна быть правильной, поскольку функция находится на верхнем уровне скрипта. Но я очень новичок в JS и не знаю, чего мне здесь не хватает. Приветствуется любая помощь в исправлении ошибки или в выполнении скрытия второго элемента другим способом.

Answer 1

Теперь он у меня работает правильно. Функция, указанная в вопросе, не работала из-за дополнительной пары круглых скобок, которые я добавил по ошибке (я скопировал из примера, который я не полностью понял, mea culpa.)

Я использовал следующие JS:

function showRegen() {
        var pub = document.getElementById("pub");
        var regen = document.getElementById("regen");
        if (pub.options[pub.selectedIndex].text == "No") {
            regen.removeAttribute('hidden');
        }
};
window.addEventListener('load', showRegen());
form.addEventListener('submit', showRegen());

Затем изменил атрибут onchange первого элемента на this.form.submit (). (Это лучше всего подходит для моего кода, потому что в контроллере есть logi c, который реализует текст предупреждения на основе значений этих двух элементов.)

Спасибо @Aarif и @Neha Sharma за просмотр.