Question

我正在使用Jquery选择的多选列表来向会议添加事件在包含游泳和田径比赛的下拉列表中选择的运动类型。当我选择游泳时，游泳活动应该在de selected列表中提供，田径运动也是如此。 Ajax对我来说有点新鲜，给我一些问题。正如您在下图中所看到的，列表中还有一个非田径事件（Event_100m_Breaststroke）。

http://oi43.tinypic.com/1tocvs.jpg

我正在使用MVC 4和实体框架

下拉：

        @Html.DropDownListFor(model => model.Meeting.RegionId, (IEnumerable<SelectListItem>)ViewBag.RegionId, "...")
        @Html.ValidationMessageFor(model => model.Meeting.RegionId)

多选：

        @Html.ListBox("Events", ViewBag.Eventslist as MultiSelectList,
               new { @class = "chzn-select", data_placeholder = "Choose  event(s)...", style = "width:350px;", id = "select1" })

Ajax电话：

$("#Meeting_Sport").change(function () {
    var _this = document.getElementById('Meeting_Sport');
    var thisValue = _this.options[_this.selectedIndex].value;

    $.getJSON("@Url.Action("GetEventsAjax")/" + _this.value, function (data) {
        if (data.Status == "Success") {
            var possibilities = "";
            var items = "";

            $.each(data.Events, function (index, item) {
                possibilities += '<li id="' + 'select1_chzn_o_' + data.EventsId[index] + '" class="active-result style="">"' + item + '"</li>';
                items += "<option value='" + data.EventsId[index] + "'>" + item + "</option>";
            });

            $(".chzn-results").children().remove().end();
            $("#select1").children().remove().end();

            $("#select1").html(items);
            $(".chzn-results").html(possibilities);

            $("label[for='input01']").show();
            $("#input01").show();
            $("#select1_chzn").show();

            var items = "";
            var possibilities = "";
        }
    });
})

Json get方法：

    [HttpGet]
    public ActionResult GetEventsAjax(String id)
    {
        try
        {
            List<String> Events = db.Events.Where(e => e.Sport == id).Select(e => e.Name).ToList();
            List<int> EventsId = db.Events.Where(e => e.Sport == id).Select(e => e.EventId).ToList();

            return Json(new { Status = "Success", Events = Events, EventsId = EventsId }, JsonRequestBehavior.AllowGet);
        }
        catch (Exception e)
        {
            return Json(new { Status = "Failure", Message = e.Message });
        }
    }

奇怪的是，当我选择游泳时，这将是结果： http://oi41.tinypic.com/2ilklle.jpg 正如您所看到的，只有游泳事件列在上面的部分中，但没有出现在多选列表中，只显示chzn结果中的游泳事件。我该怎么做才能解决这个问题？

提前致谢！

Jquery选择ajax调用populate multiselelect不工作

0 个答案: