asp.net mvc - populate drop down list with Jquery on button click in mvc

Question

I am very new to jQuery, is there by any chance some code using jQuery that I can use to populate a drop-down list with in MVC?

I am using MVC models to populate drop-down lists at the moment. How can I populate a drop-down list with jQuery to avoid posting back to the server?

At the moment I am using json as follows:

Controller:

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

View:

<%: 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>"));
     });
  });
  });
  })

However, I am getting an "expecting more source characters" error in the last bracket, and getting this data when testing:

[{"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"}]

Not in the drop down list

Answer 1

You have to append <option> to a select. Not just a string. Also, you are using team.name. In your result set, there is no "name" property on each object. There is however 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>"));
            });
        });
    });
});

I have made a jsFiddle using the results you are getting and a select.

jsFiddle

On another note, you might want to change your return type on the controller action to JsonResult instead of ActionResult.