javascript - 从另一个 DropDownList 填充 DropDownList

Question

我有两个相关的模型。

public partial class bs_delivery_type
{  
    public decimal delivery_id { get; set; }
    public decimal delivery_city_id { get; set; }
    public string delivery_address { get; set; }

    public virtual bs_cities bs_cities { get; set; }
}

第二个:

public partial class bs_cities
{
    public bs_cities()
    {
        this.bs_delivery_type = new HashSet<bs_delivery_type>();
    }

    public decimal cities_id { get; set; }
    public string cities_name { get; set; }

    public virtual ICollection<bs_delivery_type> bs_delivery_type { get; set; }
}

我有这样的 ViewBag 用于下拉列表:

ViewBag.city = new SelectList(_db.bs_cities, "cities_id", "cities_id");
ViewBag.delivery_adress = new SelectList(_db.bs_cities, "delivery_id", "delivery_address");

当我在第一个下拉列表中选择city时，在第二个下拉列表中必须出现带有delivery_adress的绑定(bind)列表，其中delivery_city_id = cars_id (来自第一个下拉列表)。

如何做到这一点？

编辑:我尝试了@Izzy评论中的方法，所以这是我的实际观点:

@model Bike_Store.Models.DeliveryModel

@{
ViewBag.Title = "Checkout";
}
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
function GetDelivery(_stateId) {
    var procemessage = "<option value='0'> Please wait...</option>";
    $("#ddldelivery").html(procemessage).show();
    var url = "/Shop/GetDeliveryByCityId/";

    $.ajax({
        url: url,
        data: { cities_id: _stateId },
        cache: false,
        type: "POST",
        success: function (data) {
            var markup = "<option value='0'>Select adress</option>";
            for (var x = 0; x < data.length; x++) {
                markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
            }
            $("#ddldelivery").html(markup).show();
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });

}
</script>
<h2>Checkout</h2>
@using (Html.BeginForm())
{
@Html.DropDownListFor(m=>m.CitiesModel, new SelectList(Model.CitiesModel, "cities_id", "cities_name"), new {@id = "ddldelivery", @style="width:200px", @onchange="javascript:GetDelivery(this.value);"})
<br />
<br />
<select id="ddldelivery" name="ddldelivery" style="width:200px">

</select>
<br /><br />

}

我的 Controller 现在看起来像这样:

public List<bs_cities> GetAllCities()
    {
        List<bs_cities> cities = new List<bs_cities>();
        foreach (var city in _db.bs_cities)
        {
            cities.Add(city);
        }
        return cities;
    }

    public List<bs_delivery_type> GetAllDeliveries()
    {
        List<bs_delivery_type> deliveries = new List<bs_delivery_type>();
        foreach (var delivery in _db.bs_delivery_type)
        {
            deliveries.Add(delivery);
        }
        return deliveries;
    }

    [HttpPost]
    public ActionResult GetDeliveryByCityId(decimal cities_id)
    {
        List<bs_delivery_type> delivery = new List<bs_delivery_type>();
        delivery = GetAllDeliveries().Where(m => m.delivery_city_id == cities_id).ToList();
        SelectList objDelivery = new SelectList(delivery, "delivery_id", "delivery_address", 0);
        return Json(objDelivery);
    }

    public ViewResult Checkout()
    {
        DeliveryModel deliveryModel = new DeliveryModel();
        deliveryModel.CitiesModel = new List<bs_cities>();
        deliveryModel.CitiesModel = GetAllCities();
        return View(deliveryModel);
    }

现在的问题是我有 2 个 ddls，但仅适用于第一个。在 scrshot 中，您可以看到我有一个城市列表，当我选择一个城市时，在同一个 ddl 中会出现一个送货地址列表，当我选择地址时，它会消失。什么魔法？请帮助我使用 Ajax。城市列表

我猜我已经修复了它，问题出在:

@Html.DropDownListFor(m=>m.CitiesModel, new SelectList(Model.CitiesModel, "cities_id", "cities_name"), new {@id = "ddldelivery", @style="width:200px", @onchange="javascript:GetDelivery(this.value);"})

我将 @id = "ddldelivery" 更改为 @id = "ddlcity" 现在可以使用了

Answer 1

以下指南将向您展示:

• 创建局部 View
• 以cityid为输入，输出送货地址列表
• 将部分 View 加载到您的选择中

注意:在这种情况下，部分 View 解决方案可能有些过大，但对于类似的问题，它实际上非常有用。

PartialView .cshtml

文件名:_deliveryTypePartial.cshtml

@model List<bs_delivery_type>

@foreach(var item in Model)
{
    <option value="@item.delivery_id">
        @item.delivery_address
    </option>
}

部分 View 的 Controller 代码:

public IActionResult _deliveryTypePartial(decimal city_id)
{
    List<bs_delivery_type> model = context.bs_delivery_types.Where(row => row.delivery_city_id == delivery_city_id).ToList();
    return PartialView(model);
}

最后，为您的 AJAX

我注意到您的两个下拉列表具有相同的 ID，这会使您的 javascript 代码变得模糊，并且被认为是不好的做法，因此出于本指南的目的，我将调用第一个下拉列表:

ddlcity

现在，在 ddlcity 的 onchange 函数中:

$('#ddldelivery').load("/ControllerName/_deliveryTypePartial?city_id=" _stateId);

这应该将部分 View 加载到第二个下拉列表中。

PS:当我完成这个问题时，你已经使用了直接ajax方法，我同意这两种方法同样适合这种情况。如果您需要填充的实际对象要复杂得多，您也许可以使用此处概述的方法。