title: Implement Multiselect jquery plugin with two sides for MVC Web API
body: <p>I'm trying to implement a JQuery plug-in called "Multiselect" with two sides which allows the user to select items from the left list box into the right list box. But when I try to implement it with MVC Web API, it fails :-(</p>
  
  <p><a href="https://i.stack.imgur.com/1qBCT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1qBCT.png" alt="enter image description here"></a></p>
  
  <p>As you can see from the screenshot, the "to" array parameter is empty. The "id" parameter is coming over just fine (because it's part of the URI).  Here is the jquery:</p>
  
  <pre><code> $("body").on("click", "#post-multi", function () {
      var btn = $("#post-multi");
      var src = btn.attr("post-src");
      var formMethod = btn.attr("post-method");
      var rec = $("#multiselect_to&gt;option").map(function () {
          return $(this).val();
      }).get();
  
      $.ajax({
          url: src,
          method: formMethod,
          data: rec,
          dataType: "json",
          traditional: true,
          success: function (response, status, xhr) {
              location.reload();
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              bootbox.alert("Error: " + errorThrown);
          }
      });
  });
  </code></pre>
  
  <p>And here is the HTML for the "right" list box containing the user selected choices:</p>
  
  <pre><code>&lt;div class="col-xs-5"&gt;
          &lt;select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"&gt;&lt;/select&gt;
      &lt;/div&gt;
  </code></pre>