jquery - tabla - ¿Cómo actualizar un segundo menú desplegable según la selección de la primera selección desplegable?

php lista desplegable dinamica

Question

Tengo dos DropDownListFor helpers y SelectList para el segundo depende del valor seleccionado del primero.

Entonces, lo que tengo que hacer es: cuando el usuario elige un valor de la primera DropDownListFor helper, la lista de selección para la segunda DropDownListFor helper tiene que actualizarse con los valores adecuados.

¿Cómo puedo actualizar esta lista de selección con jQuery?

Answer 1

Debe escuchar el evento de change de su primer menú desplegable, leer el valor seleccionado y hacer una solicitud de AJAX al servidor con este valor. Tenga un método de acción que acepte este valor y regrese los datos para su segundo menú desplegable. En la devolución de llamada de su llamada ajax, lea los datos de json que están regresando, examínelos y llene el segundo menú desplegable.

Suponiendo que su formulario tiene 2 listas desplegables, una para países y otra para estados

$(function(){

  $("#Country").change(function(){

     var countryId = $(this).val();
     var url = "@Url.Action("GetStates,"Country")"+countryId;

     $.getJSON(url,function(data){

         var options="";
         $.each(data,function(a,b){
           options+="<option value=''"+ b.Value +"''>" + b.Text + "</option>";
         });        
         $("#State").html(options);
     });

  });

});

Suponiendo que el método de acción GetStates en CountryController acepta un Id de país y devuelve una lista de elementos (con una propiedad de Valor y Texto) para los estados que pertenecen al país seleccionado.

public ActionResult GetStates(int id)
{
   var dummyStates = new List<SelectListItem>
   {
     new SelectListItem { Value="1", Text="Michigan"},
     new SelectListItem { Value="2", Text="Florida"},
     new SelectListItem { Value="3", Text="Seattle"}
   };
   return Json(dummyStates,JsonRequestBehaviour.AllowGet);
}