根据MVC中第一个dropdownlistfor的值启用第二个和第三个下拉列表

Question

我有三个DropDownLists.如果选择了第一个DropDownList中的特定值,则应启用第二个Dropdownlist.例如,如果选择了"播放器3",则应启用另外两个DropDownList,但是,如果选择"播放器2",则应禁用最后一个DropDownList,并启用第二个DropDownList.

我怎么能轻松做到这一点？我首先使用的是MVC 3 EF模型.这是我的观点中的代码:

 <p>Player</p>
     <div class="editor-field">
        @Html.DropDownListFor(m => m.PlayerName,Model.SubjectTypes, "Choose player" , new { @class = "selectstyle" })
        @Html.ValidationMessageFor(model => model.PlayerName)
    </div>

    <p>Position</p>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.PositionName, Model.Consultants, "Choose Position", new { @class = "selectstyle" })
        @Html.ValidationMessageFor(model => model.ContactPerson)
    </div>

    <p>Team</p>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.TeamName, Model.Teams, "Choose Team", new { @class = "selectstyle" })
        @Html.ValidationMessageFor(model => model.ContactPerson)
    </div>

Answer 1

您可以订阅.change()第一个下拉列表的事件，然后根据当前选择的值启用/禁用其他下拉列表：

$(function() {
    $('#PlayerName').change(function() {
        var value = $(this).val();
        if (value == 'Player3') {
            $('#PositionName, #TeamName').removeAttr('disabled');
        } else if (value == 'Player2') {
            $('#PositionName').removeAttr('disabled');
            $('#TeamName').attr('disabled', 'disabled');
        }
    });
});