html 在“是/否”字段的条件后显示更多字段- ASP.NET Core 6.0 MVC

xsuvu9jc  于 2022-12-28  发布在  .NET
关注(0)|答案(1)|浏览(134)

我有一个字段,我的用户需要输入是或否。根据他选择的选项,我需要打开更多要填充的字段。

<div class="col-6">
    <label for="Renda Bruta">Demonstrativo do Ano</label>
    <div class="col-3">
        <select asp-for="servidorPublico">
            <option value="Sim">Sim</option value="true">
            <option value="Não">Não</option value="false">
        </select>
    </div>
</div>

问题是,我该怎么做呢?我需要javascript来做这个,或者我需要调用另一个视图来填充这个字段吗?
这两个条件都将转到更多要填充的字段,其中一个将具有另一个是/否验证。

4uqofj5v

4uqofj5v1#

您可以简单地添加视图中的所有字段,并根据select的值在from端显示/隐藏包含更多字段的div。
对于此标注:

<div class="col-6">
    <label for="Renda Bruta">Demonstrativo do Ano</label>
    <div class="col-3">
        <select id="yourSelectID" asp-for="servidorPublico">
            <option value="Sim">Sim</option>
            <option value="Não">Não</option>
        </select>
    </div>
    <div id="simDivSpeceficItemsID">
          //Some specific fields for the case
     </div>
     <div id="naoDivSpeceficItemsID">
          //Some specific fields for the case
     </div>
</div>

此示例代码使用jQuery(因此添加对它的引用),但也可以使用纯javascript完成

$(function () {
    $(document).ready(function() {
        $("#yourSelectID").change(function () {
            if ($(this).val() != "Sim") {
                $("#simDivSpeceficItemsID").show();
                $("#naoDivSpeceficItemsID").hide();
            } else {
                $("#simDivSpeceficItemsID").hide();
                $("#naoDivSpeceficItemsID").show();
            }
        });
    });
});

相关问题