javascript - 根据 DropDownListFor 显示/隐藏 div

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 6 年前。

Improve this question

我需要更改 2 div 的可见性方面的帮助根据 DropDownListFor 中所选值的元素。

比方说，dropDown 中有值“One”、“Two”和“Three”。

• 我想显示 div id="time"当选择“一”或“二”的值并隐藏时 div id="fromTo"
• 当选择值“三”时，我想显示 div id="fromTo"并隐藏div id="time" 。

这是我目前拥有的代码:

<div class="form-group">
        @Html.LabelFor(model => model.I_Uloha, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.UlohaString, (SelectList)ViewBag.Tasks, new { @class = "form-control"})
            @Html.ValidationMessageFor(model => model.I_Uloha, "", new { @class = "text-danger" })
        </div>
</div>


<div id="time" class="form-group">
        @Html.LabelFor(model => model.Zataz, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Zataz, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Zataz, "", new { @class = "text-danger" })
        </div>
</div>

<div id="fromTo">
        <div class="form-group">
            @Html.LabelFor(model => model.D_Zac, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.D_Zac, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.D_Zac, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.D_Kon, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.D_Kon, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.D_Kon, "", new { @class = "text-danger" })
            </div>
        </div>
</div>

Answer 1

您需要使用 jQuery show() 和 hide() 方法来更改 View 页面中 div 元素的可见性，具体取决于下拉菜单列出这样的值:

<script type="text/javascript">
$(document).ready(function () {
    $('#UlohaString').change(function () {
        var ddlValue = $(this).val();

        if (ddlValue == "One" || ddlValue == "Two")
        {
            // show time div, hide fromTo div
            $('#time').show();
            $('#fromTo').hide();
        }
        else if (ddlValue == "Three")
        {
            // show fromTo div, hide time div
            $('#fromTo').show();
            $('#time').hide();
        }
    });
});
</script>

请注意，如果$(this).val()，则可以使用var ddlValue = $(this).find(':selected').text()在这里不起作用。

引用:

How to hide and show div in asp.net mvc 5 using dropdownlist change event