填充下拉列表使用jQuery在MVC按一下按钮 [英] populate drop down list with Jquery on button click in mvc

问题描述

我很新jQuery的，是没有任何机会使用jQuery，我可以使用MVC填充一个下拉列表中的一些code？

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?

我使用MVC模式的时刻来填充下拉列表。我怎么能填充jQuery的下拉列表，以避免回发到服务器？

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?

目前我使用JSON如下时刻：

At the moment I am using json as follows:

控制器：

   [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

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

不要在下拉列表

推荐答案

您必须追加＆LT;选项＆GT; 来一个选择。不只是一个字符串。此外，您使用的是 team.name 。在结果集中，有每个对象上没有name属性。然而有 team.Text 。

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）追加（$（＆LT;选项＆gt;中+ team.Text +＆LT; /选项＆GT;））;

$(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选择。

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

的jsfiddle

在另一方面，你可能想在控制器动作的返回类型更改为 JsonResult 而不是的ActionResult

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

这篇关于填充下拉列表使用jQuery在MVC按一下按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！