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 内のもののみが表示されます。これを解決するにはどうすればよいですか?
前もって感謝します!