Eu tenho dois modelos relacionados.

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

e o segundo:

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

e eu tenho esses ViewBag's para dropdownlist's:

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

Quando eu escolhocity no primeiro dropdownlist, no segundo deve aparecer uma lista encadernada comdelivery_adress, Ondedelivery_city_id = cities_id(da primeira lista suspensa).

Como fazer isso?

Edit: Eu tentei o método a partir do comentário de @ Izzy, então aqui está minha visão real:

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

}

Meu controlador agora fica assim:

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

O problema agora é que eu tenho 2 ddls, mas funciona apenas o primeiro. Na tela você pode ver que eu tenho uma lista de cidades, quando escolho uma cidade, nesse mesmo ddl aparece uma lista de endereços de entrega e quando eu escolho o endereço - ele desaparece. Que mágica? Me ajude por favor com o Ajax. Lista de cidades

Eu acho que corrigi-lo, o problema estava em:

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

Eu mudo@id = "ddldelivery" para@id = "ddlcity" e funciona agora