0

Saudações amigos do Stack Overflow!

Estou com uma dúvida cruel em Javascript/Jquery que está me consumindo mais tempo do que eu gostaria (hehê!) - Gostaria de filtrar um Dropdownlist baseado nas opções de outro Dropdownlist.

A imagem abaixo representa mais ou menos o que eu estou penando pra fazer!

inserir a descrição da imagem aqui

Aqui está a parte do HTML que faz isso:

<div class="form-group col-sm-3">
                <label>Nome do cadastro:</label>
                @Html.DropDownListFor(m => m.FinancialItems, new SelectList(Model.FinancialItems, "Description", "Description"),
                   new { @id = "nomeCadastro", @class = "form-control" })
            </div>

Esta classe busca os dados diretamente do banco de dados e o preenche ali com um simples "toList()".

Estou usando Javascript, JQuery, e C# com MVC5.

É possível fazer isso diretamente no JS/JQuery? (Se houver uma API/Plugin que lide com isso, também serve!

Obrigado!!!!!!!!!

6
  • Seria algo parecido com isso? pt.stackoverflow.com/a/76296/20615
    – Randrade
    Commented 4/01/2018 às 12:03
  • Como você está populando esse Dropwdown? algum dado da viewbag? é estático ? posta o código ai por favor. Commented 4/01/2018 às 12:16
  • Randrade: Tentarei ele depois, talvez possa resolver, apesar de soar um tanto complexo pra uma função que parece tão simples! @LeonardoBonetti estou populando os dados via uma lista que os puxa diretamente do BD. Vou editar minha descrição com o código usado no DropdownList. Commented 4/01/2018 às 12:43
  • @Momentanius Beleza, ai eu ja te explico como faz ;) Commented 4/01/2018 às 13:23
  • Cara, eu indicaria você colocar o segundo dropdown em uma partial e ao selecionar o primeiro dropdown, vc teria uma função que mandaria a opção selecionada pro seu controller e lá vc faria o filtro dos dados que quer ter no segundo dropdown, enviaria pra sua tela a partial do segundo dropdown e sobrescreveria ela na tela. Mais tarde, se for preciso, colocarei isso que vc pediu em um exemplo. Commented 4/01/2018 às 15:36

1 Resposta 1

0

Depois de muita porrada, consegui resolver!

Tive que usar uma função no Back End com um pouco de JS:

function GetFinancialItems(_id) {
var procemessage;
var url = "/Financial/GetFinancialItemsById/";

if (_id != 0) {
    procemessage = "<option value='0'>Aguarde...</option>";
    $("#ddlfinancialitems").html(procemessage).show();

    $.ajax({
        url: url,
        data: { id: _id },
        cache: false,
        type: "POST",
        success: function (data) {
            var markup = "<option value='0'>Selecione</option>";

            if (data.length > 0) {
                for (var x = 0; x < data.length; x++) {
                    markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                }

                $("#ddlfinancialitems").prop("disabled", false);
                $("#ddlfinancialitems").html(markup).show();
            }
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });
} else {
    procemessage = "<option value='0'>Selecione o 'Tipo da Operação'</option>";
    $("#ddlfinancialitems").html(procemessage).show();
    $("#ddlfinancialitems").prop("disabled", true);
}

};

Junto com uma função no C# (com um post):

[HttpPost]
    public ActionResult GetFinancialItemsById(int id) {
        List<FinancialItem> iFinancialItems = new List<FinancialItem>();
        iFinancialItems = _DB.FinancialItem.Where(f => f.OperationId == id).ToList();
        SelectList iFinancialItemList = new SelectList(iFinancialItems, "Id", "Description", 0);
        return Json(iFinancialItemList);
    }

Isso resolveu! Mas agradeço todas as respostas.

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 .