jQuery Multiple SelectBox + jQuery AJAX Post + ASP.NET MVC JSONAction 方法

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