How to fill a Dropdownlist from another Dropdownlist

Question

I need to know how to popular a Dropdownlist from another Dropdownlist. Example: I have a Dropdownlist called Team that takes information from my DB. When I select for example "Equipe1" I need that in my second Dropdownlist load all the members of that team. All this information is in DB. I have 3 tables Team, Member and Teammembers.

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

}

Tables

Answer 1

When placing var opt = ""; within the loop .each, the variable will be emptied (and redeclared) every iteration of the object dadosGrid.

Put it outside, and inside the loop concatenate the variable with the string that mounts the option; and after that, send via .append the result:

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

Or you can make one .append only in the end, concatenating everything:

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