-1

私はjQueryを初めて使用します.MVCでドロップダウンリストを作成するために使用できるjQueryを使用するコードはありますか?

現在、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"}]

ドロップダウンリストにない

4

1 に答える 1

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を作成しました。

jsフィドル

別の注意として、コントローラー アクションの戻り値の型をJsonResultではなく に変更することをお勧めしますActionResult。

于 2013-06-14T17:12:21.207 に答える