Javascript 从另一个DropDownList填充DropDownList

我有两个相关的模型

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

当我在第一个下拉列表中选择

city

时，在第二个下拉列表中必须出现带有

delivery\u address

的绑定列表，其中

delivery\u city\u id=cities\u 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 />

---

我将

@id=“ddldelivery”

更改为

@id=“ddlcity”

，它现在可以工作了

以下指南将向您展示：

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);
}

• 创建局部视图
• 将cityid作为输入并输出传递地址列表
• 将局部视图加载到您的选择中

注意：在这种情况下，局部视图解决方案可能有些过分，但对于类似的问题，它实际上是非常有用的

PartialView.cshtml

文件名：_deliveryTypePartial.cshtml

@model List<bs_delivery_type>

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

这将把局部视图加载到第二个下拉列表中

---

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

当第一个下拉列表中的选择发生更改时，您可能需要调用一个函数来获取第二个下拉列表。使用onchange函数在选择更改时调用函数，然后使用js/jquery填充第二个下拉列表。同意@Hirav Sampat，请使用实际的cshtml编辑您的问题，我很乐意为您提供部分视图解决方案。第二个DDL是否与第一个DDL位于同一视图上？我建议您对第二个DDL使用部分视图&bind

SelectList

from action method，该方法处理来自第一个DDL的AJAX请求。@Tetsuyayayamamoto它现在可以工作了，我在DropDownList中漏掉了“@id”

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

@model List<bs_delivery_type>

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

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);
}

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