"Filter" options from a Dropdownlist based on a selected option from another Dropdownlist

Asked

Viewed 478 times

0

Greetings friends of Stack Overflow!

I’m having a cruel doubt in Javascript/Jquery that is consuming me more time than I would like (heh!) - I would like to filter one Dropdownlist based on the options of another Dropdownlist.

The image below represents more or less what I’m struggling to do!

inserir a descrição da imagem aqui

Here’s the HTML part that does this:

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

This class searches the data directly from the database and fills it there with a simple "toList()".

I’m using Javascript, JQuery, and C# with MVC5.

It is possible to do this directly on JS/JQuery? (If there is a API/Plugin that deals with it, also serves!

Thank you!!!!!!!!!

javascript c# jquery asp.net-mvc

  • Would that be something like that? https://answall.com/a/76296/20615

  • How are you populating that Dropwdown? some viewbag data? is static ? put the code there please.

  • Randrade: I’ll try it later, maybe I can solve it, although it sounds a bit complex for a function that looks so simple! @Leonardobonetti I’m populating the data via a list that pulls them directly from the comic book. I will edit my description with the code used in Dropdownlist.

  • @Momentanius Beauty, I’ll tell you how you do it ;)

  • Dude, I would indicate you put the second dropdown on a partial and when selecting the first dropdown, you would have a function that would send the selected option to your controller and there you would filter the data you want to have on the second dropdown, would send to your screen the partial of the second dropdown and overwrite it on the screen. Later, if I have to, I’ll put what you asked for in an example.

  • Financialitems has an attribute with reference to its first dropdown index?

Show 1 more comment

1 answer

0


After a lot of beating, I managed to solve!

I had to use a function in the Back End with a little 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);
}

};

Along with a function in C# (with a 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);
    }

That solved it! But I appreciate all the answers.

Browser other questions tagged javascript c# jquery asp.net-mvc

You are not signed in. Login or sign up in order to post.