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

时间:2012-03-20 15:43:56

标签: asp.net-mvc asp.net-mvc-3 drop-down-menu

我有三个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>

2 个答案:

答案 0 :(得分:3)

我会在jquery中执行以下操作:

$('#PlayerName').change(function() 
{
    var id = $(this).val()
    $.ajax({
        url: '@Url.Action("GetPositions")',
        data:
            {
                "id": id,
            },
        success: function (data)
        {
           $("#positions").html(data);
        }
    });
}

然后我将在动作控制器中:

public JsonResult GetPositions(int id)
{
  var positions = Repository.GetPositionsByPlayerId(id);
  var hmtl = positions.Select(x => new SelectListItem
    {
      Value = x.PositionID.ToString(),
      Text = x.Name
    });
  return new JsonResult { Data = html };
}

这将使用与该播放器相关的所有位置填充值。

答案 1 :(得分:2)

您可以订阅第一个下拉列表的.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');
        }
    });
});