隐藏元素直到做出选择答案

【问题标题】：Hiding an element until a selection is made隐藏元素直到做出选择
【发布时间】：2020-08-25 05:51:03
【问题描述】：

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

select 元素都从包含“是”、“否”和“”的列表中提取项目。第二个 div 应隐藏，直到第一个元素更改为“否”。

当我在 IIS 中测试此代码时，没有任何反应。当我在 JSFiddle 中尝试时，我收到错误 "Uncaught ReferenceError: hideRegen is not defined."

我已经检查了这里的其他问题是否存在该错误，但无法弄清楚它发生的原因。范围应该是正确的，因为该函数位于脚本的顶层。但是我非常对 JS 很陌生，不知道我在这里可能缺少什么。非常感谢任何纠正错误或以另一种方式隐藏第二个元素的帮助。

【问题讨论】：

能把小提琴的链接加进去吗
jsfiddle.net/#&togetherjs=Lfmx1Gd5cD HTML 有点不同，因为我没有要从中提取的 asp 数据，但我认为它应该以相同的方式运行。
你能检查一下这个codepen.io/NehhaSharma/pen/OJyZXLx 似乎在 JSFiddle 中 ID 引用不正确，我所做的唯一更改是使用 removeAttribute('hidden')
嗯，更改了哪个 ID 参考？我没看到。我尝试使用 removeAttribute('hidden') 函数而不是 show() 函数，但没有任何变化。

标签： javascript html asp.net razor

【解决方案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()”。（这对我的代码最有效，因为控制器中有根据这两个元素的值实现警告文本的逻辑。）

感谢@Aarif 和@Neha Sharma 观看。

【讨论】：