привязать второй ddl в зависимости от первого ddl

Question

У меня есть страница, где у меня есть LeagueDDL, ClubDDL, а затем список игроков.Я хочу добиться того, чтобы пользователь выбрал Лигу, после чего Клубы привязываются ко второму DDL в соответствии с идентификатором Лиги, и когда пользователь также выбирает Клуб, список игроков привязывается к Виду.в зависимости от ClubID.

Пока у меня есть следующее: -

View: -

<script type="text/javascript">

function populateClubsDropdown() {
    $("#ddlClubs").empty();
    var typeID = getLeagueID();
    $.getJSON('@Url.Action("GetClubsByLeague", "Footballer")?TypeID=' + typeID, function (result) {
        $.each(result, function () {
            $("<option>").attr("value", this.ClubID).text(this.Club).appendTo("#ddlClubs");
        });
    });
}

function getLeagueID() {
    var leagueID = $("#ddlLeagues").val();
    return leagueID;
}

</script>


@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList, 
    new { id = "ddlLeagues", onChange = "$:populateClubsDropdown()" })
@Html.DropDownListFor(model => model.Club.ClubID, Model.ClubList, new { id = "ddlClubs" })

и в моем контроллере у меня есть: -

        public ViewResult Index()
    {
        League league = new League();
        string selected = "Please Select";
        model.LeagueList = model.PopulateLeagueDDL(selected, league, null);

        Club club = new Club();
        model.ClubList = model.PopulateClubDDL(selected, league, club, null);

        model.Footballers = db.Footballers.Include("Club").Include("Position").Include("Status").Include("Country");
        return View(model);
    }

       public JsonResult GetClubsByLeague(int LeagueID)
    {
        var result = footballersDAL.GetClubsByLeagueId(LeagueID).Select(
                c => new { ClubID = c.ClubID, Club = c.ClubName });
        JsonResult jsonResult = new JsonResult { Data = result, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        return jsonResult;
    }

Когда я запускаю страницу в первый раз, оба выпадающих меню верны, однако, когда я изменяю LeagueDDL, я получаю пустой второй DDL.И точка останова Json не работает.

Я был бы признателен за помощь в этом, я не могу понять, что я не так.

ОБНОВЛЕНИЕ ДЛЯ ПРОСМОТРА

<script type="text/javascript">

function populateClubsDropdown() {
    $("#ddlClubs").empty();
    var typeID = getLeagueID();
    $.getJSON('@Url.Action("GetClubsByLeague", "Footballer")?TypeID=' + typeID, function (result) {
        $.each(result, function () {
            $("<option>").attr("value", this.ClubID).text(this.Club).appendTo("#ddlClubs");
        });
    });
}

function getLeagueID() {
    var leagueID = $("#ddlLeagues").val();
    return leagueID;

$(function () {
        $('#ddlLeagues').change(populateClubsDropdown);
    });
}

@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList,
            new { id = "ddlLeagues" })
@Html.DropDownListFor(model => model.Club.ClubID, Model.ClubList, new { id = "ddlClubs" })

Answer 1

Похоже, проблема здесь:

@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList, 
new { id = "ddlLeagues", onChange="$:populateClubsDropdown()" }) //What is"$:"?!

Изменить на:

@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList, 
new { id = "ddlLeagues", onChange = "populateClubsDropdown()" })

Использование ненавязчивого слушателя событий jQuery лучше для события:

 <script>    
    function populateClubsDropdown() {
        $("#ddlClubs").empty();
        var typeID = getLeagueID();
        $.getJSON('@Url.Action("GetClubsByLeague", "Footballer")?TypeID=' + typeID, function (result) {
            $.each(result, function () {
                $("<option>").attr("value", this.ClubID).text(this.Club).appendTo("#ddlClubs");
            });
        });
    }

    $(function(){
        $('#ddlLeagues').change(populateClubsDropdown);
    });
</script>

@Html.DropDownListFor(model => model.League.LeagueID, Model.LeagueList, 
new { id = "ddlLeagues"})

@Html.DropDownListFor(model => model.Club.ClubID, Model.ClubList,
 new { id = "ddlClubs" })

---

Обновление: Похоже, вы отправили неправильный параметр в действие:
должно быть LeagueID, но вы отправили TypeId ~