Question

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

让我们说，在dropDown中有值＆＃34; One＆＃34;，＆＃34; Two＆＃34;和＆＃34;三＆＃34;。

我希望在＆＃34; One＆＃34;的价值时显示div id="time"或＆＃34;两个＆＃34;已被选中并隐藏div id="fromTo"
当价值＆＃34;三＆＃34;已被选中，我想展示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()＆amp; hide()方法可根据下拉列表值更改视图页中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>

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

参考：

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

Answer 2

你可以使用javascript并从你的剃刀元素中调用它

@Html.DropDownListFor("Someidorname", null, "Select Your value", new { @class = "form-control", onchange = "clickMe()" })

的Javascript

<script>
 $(document).ready(function () {
 function clickMe()
 {
    var e = document.getElementById("ddlViewBy");
    var ddlValue = e.options[e.selectedIndex].value;

    if(ddlValue =="x") 
    {
        document.getElementById("attid").style.display = 'none';
    }
    else
    {
        document.getElementById("attid").style.display = 'none';
    } 
  }
});

Answer 3

检查以下Jquery代码以实现此目的：

你可以使用“.css（'display'，'none'）”隐藏你的div

<script type="text/javascript">
$(document).ready(function () {
     $('#UlohaString').change(function () {
                var drpValue = $("#UlohaString").val();
                if (drpValue == 1 || drpValue == 2)
                {
                    $('#fromTo').css('display', 'none');
                }
                else
                {
                    $('#fromTo').css('display', 'block');
                }

            });
 });
</script>

干杯!!

Answer 4

如评论中所述，您可以使用jQuery来实现此目的。

<script>
    // use @Html.IdFor so this does not break 
    // if you rename the UlohaString property in the ViewModel
    var dropdown = $('#@Html.IdFor(m => m.UlohaString)');

    dropdown.on('change', function () {
        // this gets the "value" attribute of the selected option
        // if you need the text, use .text() instead of .val()
        var selected = $('option:selected', dropdown).val();

        // best practice to use === instead of == for comparisons
        if (selected === 'One' || selected === 'Two') {
            $('#time').show();
            $('#fromTo').hide();
        } 
        else if (selected === 'Three') {
             $('#time').hide();
             $('#fromTo').show();
        }
    }
</script>

根据DropDownListFor显示/隐藏div

4 个答案: