2

Jquery の選択された multiselectlist を使用して、水泳と陸上競技の文字列を含むドロップダウンで選択されたスポーツの種類に基づいて、イベントを会議に追加しています。水泳を選択すると、選択したリストで水泳イベントのみが利用可能になります。陸上競技でも同じです。Ajax は私にとっては初めてのことで、いくつかの問題を抱えています。次の画像でわかるように、リストには陸上競技以外のイベント (Event_100m_Beaststroke) もあります。

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

MVC 4 と Entity Framework を使用しています

落ちる:

        @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 });
        }
    }

奇妙なことに、たとえば水泳を選択すると、次のような結果になり ます 。複数選択リストでは、chzn-results 内のもののみが表示されます。これを解決するにはどうすればよいですか?

前もって感謝します!

4

0 に答える 0