根据第一个ddl绑定第二个ddl

Question

我有一个页面，我有一个LeagueDDL，一个ClubDDL，然后是一个玩家列表。我想要实现的是用户将选择联盟，然后根据联盟的ID将俱乐部绑定到第二个DDL，并且当用户也选择俱乐部时，玩家列表被绑定到视图取决于ClubID。

到目前为止，我有以下几点： -

查看： -

<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断点没有被击中。

我将不胜感激这方面的一些帮助，我不能完全弄清楚我有什么问题。

更新到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; 

$(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〜