0

Preciso saber como faço para popular um DropDownList a partir de outro DropDownList. Exemplo: Tenho um DropDownList chamado Equipe que pega as informações do meu DB. Quando seleciono por exemplo "Equipe1" preciso que no meu segundo DropDownList carregue todos os integrantes daquela equipe. Todas essas informações estão no DB. Tenho 3 tabelas Equipe, Integrante e EquipedeIntegrantes.

Buscar Integrante

    [HttpGet]
    public ActionResult ListarIntegrantes(int id)
    {
        GerenciadorContexto ctx = new GerenciadorContexto();
        var lista = new List<EquipedeIntegrante>();

        try
        {
            lista = ctx.EquipedeIntegrantes.Where(m => m.EquipeId == id).ToList();
        }
        catch (Exception ex)
        {

            throw;
        }

        return Json(new { Resultado = lista }, JsonRequestBehavior.AllowGet);
    }

View

    @using (Html.BeginForm()) 
    {

      <div class="form-horizontal">
        <h4>TarefaViewModel</h4>
        <hr />
        <div class="form-group">
            @Html.LabelFor(model => model.EquipeId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.EquipeId, Model.Equipes, "--Selecione", new { @class = "form-control" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.IntegranteId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select id="IntegranteId" class="form-control"></select>
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Descricao, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Descricao, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Conclusao, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Conclusao, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Script

$(document).ready(function () {

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

        var value = $("#EquipeId option:selected").val();

        if (value !== 0 || value !== undefined)
        {
            ListarIntegrantes(value);
        }

    })

})

function ListarIntegrantes(value)
{

    var url = "/Tarefas/ListarIntegrantes";
    var data = { equipe: value };
    $("#EquipeId").empty();
    $.ajax({

        url: url,
        type: "GET",
        datatype: "json",
        data: data
    }).done(function (data) {

        if (data.Resultado.length > 0) {
            var dadosGrid = data.Resultado;
            $("#EquipeId").append('<option value="">--Selecione</option>');

            $.each(dadosGrid, function (indice, item) {

                var opt = "";

                opt = '<option value="' + item["Id"] + '">' + item["Nome"] + '</option>';
            })
        }
    })

}

Tabelas

Tabela EquipedeIntegrante

IntegranteEquipe

1 Resposta 1

1

Ao colocar var opt = ""; dentro do laço .each, a variável será esvaziada (e redeclarada) a cada iteração do objeto dadosGrid.

Coloque-a fora, e dentro do laço concatene a variável com a string que monta as option; e após isso, envie via .append o resultado:

if (data.Resultado.length > 0) {
   var dadosGrid = data.Resultado;
   $("#EquipeId").append('<option value="">--Selecione</option>');

   var opt = "";
   $.each(dadosGrid, function (indice, item) {
      opt += '<option value="' + item["Id"] + '">' + item["Nome"] + '</option>';
   })
   $("#EquipeId").append(opt);
}

Ou você pode fazer um .append só no final, concatenando tudo:

if (data.Resultado.length > 0) {
   var dadosGrid = data.Resultado;
   var opt = "";
   $.each(dadosGrid, function (indice, item) {
      opt += '<option value="' + item["Id"] + '">' + item["Nome"] + '</option>';
   })
   $("#EquipeId").append('<option value="">--Selecione</option>'+opt);
}
3
  • Continua retornando o mesmo erro amigo no console do navegador GET localhost:54446/Tarefas/ListarIntegrantes?equipe=1 500 (Internal Server Error) Commented 19/05/2019 às 19:33
  • Mas na pergunta não cita nenhum erro :D ... os únicos erros que vi foram os que coloquei na resposta. Se está dando erro de servidor, não é problema no JavaScript. Tem que saber que erro é esse do servidor. Provavelmente no arquivo "/Tarefas/ListarIntegrantes".
    – Sam
    Commented 19/05/2019 às 19:58
  • Olhe acima o método ListarIntegrantes se possui algum erro por gentileza Commented 19/05/2019 às 20:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .