2012-03-20 13 views
5

Tengo tres DropDownLists. Si se elige un Valor específico de mi primera DropDownList, se debe habilitar la segunda Dropdownlist. Ejemplo, si se eligió "Player 3", los otros dos DropDownList deberían estar habilitados, sin embargo, si se elige "Player 2", la última DropDownList debería desactivarse y la segunda habilitada.Activando la segunda y tercera listas desplegables para basadas en el valor de la primera lista desplegable en MVC

¿Cómo puedo hacer esto fácilmente? Estoy usando primero el modelo MVC 3 EF. Este es mi código en mi opinión:

<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> 
+0

¿Quiere decir si un jugador ha sido elegido en el modelo o elegido en el lado del cliente? Si es del lado del cliente, la respuesta a continuación, utilizando JQuery/Javascript, es la única forma en que puede obtener cualquier comportamiento. Si está en el lado del servidor, debería poder hacer esto fácilmente con unas pocas sentencias if. – Khelvaster

Respuesta

2

Usted puede suscribirse a la .change() caso de la primera lista desplegable y luego en función del valor seleccionado en ese momento activar/desactivar los otros:

$(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'); 
     } 
    }); 
}); 
+0

He hecho ese guión, pero mi guión parece no funcionar. He usado Mozilla Firefox Firebug, y las secuencias de comandos se están cargando, sin embargo, una vez que selecciono un reproductor, las secuencias de comandos no parecen realmente cambiar mis otras listas desplegables a desactivadas. –

+0

@ps__, y cuando depuró su script, ¿cuál era el valor de la variable 'value' dentro del método de cambio? ¿Fue 'Player3'? ¿O fue 'Player2'? O tal vez era otra cosa que explicaría por qué no pasó nada. –

+0

Ok, parece que el valor en realidad es de nuestra ID, es decir, el jugador 2 tiene la ID 2. Así que simplemente cambié el valor a "value == '2'" en lugar de "Player2". Fue mi mal. ¡De todas formas, gracias por la ayuda! –

3

lo haría haga lo siguiente en jquery:

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

entonces tendré en el controlador de acción:

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 }; 
} 

Esto llenará los valores con todas las posiciones relacionadas con ese jugador.

Cuestiones relacionadas