jQuery Multiple SelectBox + jQuery AJAX Post + ASP.NET MVC JSONAction 方法
<select id="SelectBox" style="margin-top:8px; height:30px;"> <option value="">– Please Select –</option> @{ foreach (jQueryDataTableDAO.NATION item in ViewBag.NationList) { <option value="@(item.NATION_ID)">@(item.NATION_NAME)</option> } } </select> < div id="SelectedItem" style="margin-top:5px;" >< /div > <input id="SaveBtn" type="button" value="Save" style="font-weight:bold; margin-top:3px; font-family:Arial; font-size:10pt;" /> |
$(document).ready(function() { $("#SelectBox").change(function() { if (!SelectedDuplicatedItem($(".item"), $(this).val())) $("#SelectedItem").append(SelectedListAdd($(this).val(), $("#SelectBox option:selected").text())); SelectorBtnEvent(); }); $("#SaveBtn").click(function () { var SelectedVal = []; $(".selectedelement").each(function () { SelectedVal.push($(this).val()); }); PostUserFormObj(SelectedVal); }); SelectorBtnEvent(); }); function SelectedListAdd(selected_id, selected_text) { var ListItem = ""; ListItem += "< div class='item' style='cursor:default; font-weight:bold; font-family:Arial; color:#000000;' data-id='" + selected_id + "'>"; ListItem += "< span class='selectedbtn' style='cursor:pointer;'>X< /span> "; ListItem += selected_text; ListItem += "< input type='hidden' class='selectedelement' value=' " + selected_id + "' />" ListItem += "< /div>"; return ListItem; } function PostUserFormObj(data) { $.ajax({ url: "@(Url.Action("SelectBoxForm", "JSON"))", type: "POST", dataType: "json", data: { "value" : data }, success: function (data) { console.log(data); } }); } function SelectorBtnEvent() { $(".item .selectedbtn").on("click", function () { $(this).parent().remove(); }); } function SelectedDuplicatedItem(Element, SelectedValue) { var Existed = false; if (SelectedValue == "") Existed = true; Element.each(function () { if ($(this).attr("data-id") == SelectedValue) Existed = true; }); return Existed; } |