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

Populate one DropDown List from another selected value

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

 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>

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

I want to populate the second(Price) drop down list based on the value selected from the first drop down list.

要实现上述实现级联下拉列表的要求,您可以尝试根据之前在“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

    //...