javascript - 单击下拉列表 MVC 4 时显示/隐藏

Question

我的看法是:

<div class="editor-field">Best</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.Best, new List<SelectListItem>
    {
        new SelectListItem { Value = "Best3", Text = "Best 3"},
        new SelectListItem { Value = "Best5", Text = "Best 5"},
        new SelectListItem { Value = "Best10", Text = "Best 10"},
        new SelectListItem { Value = "XBest", Text = "X Best"}
    },
    new { @class = "myselect" })
    @Html.ValidationMessageFor(model => model.Best)
</div> 
<div class="editor-label">X</div>
<div class="editor-field">
    @Html.EditorFor(model => model.X)
    @Html.ValidationMessageFor(model => model.X)
</div>

我有这个 jquery:

$('#Best').on('change', function () {
    if ($(this).val() != "XBest") {
        $('#X').hide(); //invisible
        $('#X').attr('disabled', 'disabled'); // disable
    } else {
        $('#X').show(); //visible
        $('#X').removeAttr('disabled'); // enable
    }
});

它有效，但是当我转到此 View 时，EditorFor X 始终可见，只有当我开始单击下拉列表的值时才会更改。我的问题是它如何在访问 View 时保持隐藏状态并且仅在单击时显示。

Answer 1

您需要在绑定(bind)事件后立即执行 change() 事件，如下所示。

$('#Best').on('change', function () {
    if ($(this).val() != "XBest") {
        $('#X').hide(); //invisible
        $('#X').attr('disabled', 'disabled'); // disable
    } else {
        $('#X').show(); //visible
        $('#X').removeAttr('disabled'); // enable
    }
}).change(); // auto execute