从另一个选定值填充一个下拉列表

时间:2020-10-13 08:42:50

标签: c# asp.net asp.net-mvc asp.net-core asp.net-mvc-4

我有两个下拉列表,我像这样填充它们:

 private List<Client> Client()
        {
            var allClients= _db.tboClient.Select(x =>
            new Tecnico
            {
                Id = x.Id,
                Nome = x.Nome
            }).ToList();
            return allClients;
        }

        private List<Pricerice> Price()
        {
            var allPrice = _db.tboPrice.Select(x =>
            new Cliente
            {
                Id = x.Id,
                Nome_azienda = x.Nome_azienda
            }).ToList();
            return allPrice ;
        }

然后我想起了Client()Price()的一些方法。我像这样加载 View

public IActionResult Create()
{
    ViewBag.Price= Pricei();
    ViewBag.Clienti = CLienti();
    return View();
}

这是HTML:

 <div class="dropdown">
      @Html.DropDownListFor(m => m.CLienti, new SelectList(ViewBag.CLienti, "Id", "Nome_azienda"), new { @id = "ddlCLienti", @class = "btn btn-primary dropdown-toggle  mr-3" })
 </div>

 <div class="dropdown">
       @Html.DropDownListFor(m => m.Price, new SelectList(ViewBag.Price, "Id", "Nome"), new { @id = "ddlClienti", @class = "btn btn-primary dropdown-toggle  mr-3" })
</div>

我想根据从第一个下拉列表中选择的值填充第二个(价格)下拉列表。

1 个答案:

答案 0 :(得分:0)

我想根据从第一个下拉列表中选择的值填充第二个(价格)下拉列表。

要达到实现级联下拉菜单的上述要求,您可以尝试根据对“ ddlCLienti” dorpdown change事件的第一个下拉菜单的先前选择来填充第二个下拉菜单,如下所示。

<script>
    $(function () {
        $("select#ddlCLienti").change(function () {
            var CLienti = $(this).val();

            $("select#ddlPrice").empty();

            $.getJSON(`/your_controller_name_here/GetPriceBySelectedCLienti?CLienti=${CLienti}`, function (data) {
                //console.log(data);
                $.each(data, function (i, item) {
                    $("select#ddlPrice").append(`<option value="${item.id}">${item.nome}</option>`);
                });
            });
        })
    })
</script>

GetPriceBySelectedCLienti操作方法

public List<Price> GetPriceBySelectedCLienti(int CLienti)
{
    //query data based on selected CLienti

    //...