Выпадающий список внутри модального всплывающего окна не работает

Question

Мне нужна помощь, у меня есть частичное представление "_CreateRoom" внутри модального всплывающего окна. Моя проблема в том, что выпадающий список Campaign не загружается, когда я выбираю клиента. Мне не нужно делать "пост", потому что я использую signalR для создания комнат.

Index.cs html

<div class="row">
    <a href="#" onclick="AddRooms()">New Room</a>
</div>

<div class="modal" id="create-room" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">New Room</h4>
            </div>
            <div class="modal-body" id="roomModalBody"></div>
        </div>
    </div>
</div>

<script>
    var AddRooms = function () {
        var url = "/Home/CreateRoom";
        $("#roomModalBody").load(url, function () {
            $("#create-room").modal("show");
        })
    }
</script>

HomeController

public class HomeController : Controller
    {
        ApplicationDbContext app = new ApplicationDbContext()
        public ActionResult CreateRoom()
        {
            /*GetCustomers(): Get the Customer list.*/
            ViewBag.CustomerList = new SelectList(GetCustomers(), "ID", "Name");
            ViewBag.CampaignList = new SelectList(new List<Campaign>(), "ID", "Name");

            return PartialView("_CreateRoom");
        }
        public JsonResult GetCampaignList(int customerID)
        {
            /*GetCampaigns(customerID):  Get the campaigns by customerID*/
            return new JsonResult { Data = GetCampaigns(customerID), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }

Модели -> CreateViewModel :: CreateViewModel класс имеет три свойства: идентификатор клиента, идентификатор кампании, имя.

_CreateRoom.cs html

@using MyProyect.Models
@model CreateViewModel

<div>
    <form id="formRegister">
        <div class="row">
            <div class="col-md-12">
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    @Html.DropDownListFor(r => r.CustomerID, ViewBag.CustomerList as SelectList, "-- Select --", new { @class = "form-control" })
                </div>
                <div class="form-group">
                    @Html.DropDownListFor(r => r.CampaignID, ViewBag.CampaignList as SelectList, "-- Select --", new { @class = "form-control"})
                </div>
                <div class="form-group">
                   @Html.TextBoxFor(r => r.Name, new { @class = "form-control", @placeholder = "Name" })
                </div>
                <a href="#" class="btn btn-success btn-block" id="btnSubmit">Register</a>
            </div>
        </div>
    </form>
</div>  

@section scripts{
    <script>
        $(document).ready(function () {
            $('body').on('change', '#CustomerID', function () {
                var customerID = $(this).val();
                LoadCampaigns(customerID);
            })
        });

        function LoadCampaigns(customerID) {
            var $campaign = $('#CampaignID');

            $.ajax({
                url: '/Home/GetCampaignList',
                type: 'GET',
                data: { 'customerID': customerID },
                dataType: 'json',
                success: function (d) {
                    $campaign.empty();
                    $campaign.append($('<option></option>').val('').html("-- Select --"));
                    $.each(d, function (i, val) {
                        $campaign.append($('<option></option>').val(val.ID).html(val.Name));
                    });  
                }
            });
        }
    </script>
}