2

我正在使用 Jquery 选择的多选列表根据在包含游泳和田径字符串的下拉列表中选择的运动类型将事件添加到会议中。当我选择游泳时，选择列表中应该只提供游泳项目，田径运动也是如此。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" })

阿贾克斯调用：

$("#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获取方法：

    [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-results 中的那些。我能做些什么来解决这个问题？

提前致谢！

4

0 回答 0