Question

我是jQuery的新手，有没有一些代码使用jQuery，我可以用它来填充MVC中的下拉列表？

我正在使用MVC模型来填充下拉列表。如何使用jQuery填充下拉列表以避免回发到服务器？

目前我正在使用json，如下所示：

控制器：

   [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult GetTeams(StatisticModel model)
    {
        StatisticModel newModel = new StatisticModel(model.leagueId);
        var teams = newModel.getTeams;
        return Json(teams);
}

查看：

<%: Html.DropDownListFor(model => model.leagueId, Model.getLeagues, new { @class = "dropdownlistLeagueStyle" })%></td><td><input id="leagueButton" class="loginButton" value="GetTeams" type="submit" />

<select id="LeagueTeams"></select>

的Javascript

$(function() {
$(".dropdownlistLeagueStyle").change(function () {
    $.getJSON("/Admin/GetTeams", { LeagueId: $(".dropdownlistLeagueStyle").val() },
  function (teams) {
      $("#LeagueTeams").empty();
      $.each(teams, function (i, team) {
         $("#LeagueTeams").append($("<option>" + team.Text + "</option>"));
     });
  });
  });
  })

但是，我在最后一个括号中遇到“期待更多源字符”错误，并在测试时获取此数据：

[{"Selected":false,"Text":"Arsenal","Value":"1"},
{"Selected":false,"Text":"Aston Villa","Value":"3"},
{"Selected":false,"Text":"Cardiff City","Value":"20"},
{"Selected":false,"Text":"Chelsea","Value":"4"},
{"Selected":false,"Text":"Crystal Palace","Value":"22"}, 
{"Selected":false,"Text":"Everton","Value":"5"},
{"Selected":false,"Text":"Fulham","Value":"6"},
{"Selected":false,"Text":"Hull City","Value":"21"},
{"Selected":false,"Text":"Liverpool","Value":"7"},
{"Selected":false,"Text":"Manchester City","Value":"8"},
{"Selected":false,"Text":"Manchester United","Value":"9"},
{"Selected":false,"Text":"Newcastle United","Value":"10"},
{"Selected":false,"Text":"Norwich","Value":"11"},
{"Selected":false,"Text":"Southampton","Value":"13"},
{"Selected":false,"Text":"Stoke City","Value":"14"},
{"Selected":false,"Text":"Sunderland","Value":"15"},
{"Selected":false,"Text":"Swansea City","Value":"16"},
{"Selected":false,"Text":"Tottenham Hotspur","Value":"17"},
{"Selected":false,"Text":"West Bromwich Albion","Value":"18"},
{"Selected":false,"Text":"West Ham United","Value":"19"}]

不在下拉列表中

Answer 1

您必须将<option>附加到选择中。不只是一个字符串。此外，您正在使用team.name。在结果集中，每个对象上没有“name”属性。但是有team.Text。

$("#LeagueTeams").append($("<option>" + team.Text + "</option>"));

$(function() {
    $(".dropdownlistLeagueStyle").change(function() {
        $.getJSON("/Admin/GetTeams", {
            LeagueId: $(".dropdownlistLeagueStyle").val()
        }, function(results) {
            $("#LeagueTeams").empty();
            $.each(results, function(i, team) {
                // append an option with the team name in there
                $("#LeagueTeams").append($("<option>" + team.Text + "</option>"));
            });
        });
    });
});

我使用你得到的结果和一个选择来制作一个jsFiddle。

jsFiddle

另外，您可能希望将控制器操作的返回类型更改为JsonResult而不是ActionResult。

使用Jquery填充下拉列表，在mvc中单击按钮

1 个答案: