Включение второго и третьего выпадающего списка для значения первого выпадающего списка в MVC

Question

У меня есть три DropDownLists. Если выбрано определенное значение из моего первого DropDownList, второй Dropdownlist должен быть включен. Например, если был выбран «Player 3», два других DropDownList должны быть включены, однако, если выбран «Player 2», последний 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

Я бы сделал следующее в 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 };
}

Это заполнит значения всеми позициями, связанными с этим игроком.

Answer 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');
        }
    });
});