title: Invalid ModelState when moving items from one select list to another via javascript
body: <p>I've got a page that contains two lists, one empty, one populated with values, both identical in structure. A user can select an item from the populated list, click a button, and it will move to the empty list via jQuery. When the form is submitted, I save all the option ids into a hidden form field to be later parsed out after post. However, when I submit the page, if I have moved a value from one listbox to the other, I encounter the following error (otherwise, the page posts normally):</p>
  
  <pre><code>System.InvalidOperationException: The parameter conversion from type 
  'System.String' to type 'System.Web.Mvc.SelectListItem' failed because no type
   converter can convert between these types. at 
   System.Web.Mvc.ValueProviderResult.ConvertSimpleType(CultureInfo culture, Object value, Type destinationType) at 
   System.Web.Mvc.ValueProviderResult.UnwrapPossibleArrayType(CultureInfo culture, Object value, Type destinationType) at 
   System.Web.Mvc.ValueProviderResult.ConvertTo(Type type, CultureInfo culture) at 
   System.Web.Mvc.ValueProviderResult.ConvertTo(Type type) at 
   System.Web.Mvc.DefaultModelBinder.ConvertProviderResult(ModelStateDictionary modelState, String modelStateKey, ValueProviderResult valueProviderResult, Type destinationType)
  </code></pre>
  
  <p>Here is the relevant code:</p>
  
  <p>ViewModel:</p>
  
  <pre><code>public class ViewModel
  {
      public IEnumerable&lt;SelectListItem&gt; currentUsers { get; set; }
      public IEnumerable&lt;SelectListItem&gt; availableUsers { get; set; }
  }
  </code></pre>
  
  <p>Initial Controller Action:</p>
  
  <pre><code>public ActionResult Index() 
  {
      IEnumerable&lt;User&gt; availableUsers = SomeDal.GetUsers();
  
      var model = new ViewModel 
      {
          currentUsers = Enumerable.Empty&lt;User&gt;().Select(x =&gt; new SelectListItem
          {
              Value = x.id.ToString(),
              Text = x.name
          }),
  
          availableUsers = availableUsers.Select(x =&gt; new SelectListItem
          {
              Value = x.id.ToString(),
              Text = x.lastName
          })
      };
  }
  </code></pre>
  
  <p>POST Controller Action:</p>
  
  <pre><code>[HttpPost]
  public ActionResult Index(ViewModel model) 
  {
      // at this point, ModelState.IsValid is already true, so I figure the rest of this isn't necessary
  }
  </code></pre>
  
  <p>The jQuery that moves items:</p>
  
  <pre><code>$('#swapUsers').click(function () {
      $('#availableUsers option:selected').appendTo('#currentUsers');
  });
  </code></pre>
  
  <p>The ListBoxes::</p>
  
  <pre><code>@Html.ListBox(
           "currentUsers",
           new SelectList(Model.currentUsers, "value", "text"),
           new { @class = "listbox" }
           )
  
  @Html.ListBox(
           "availableUsers",
           new SelectList(Model.availableUsers, "value", "text"),
           new { @class = "listbox" }
           )
  </code></pre>
  
  <p>I had thought at first it was because of my strange Enumerable.Empty call, but the error occurs even if the currentUsers IEnumerable contains data.</p>
  
  <p>EDIT 1:</p>
  
  <p>HTML Pre-Post</p>
  
  <pre><code>&lt;select class="listbox" id="currentUsers" multiple="multiple" name="currentUsers"&gt;&lt;/select&gt;
  &lt;select class="listbox" id="availableUsers" multiple="multiple" name="availableUsers"&gt;
      &lt;option value="1"&gt;Test User 1&lt;/option&gt;
      &lt;option value="2"&gt;TestUser2&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>HTML Post-Post</p>
  
  <pre><code>&lt;select class="input-validation-error listbox" id="currentUsers" multiple="multiple" name="currentUsers"&gt;
      &lt;option selected="selected" value="1"&gt;Test User 1&lt;/option&gt;
  &lt;/select&gt;
  &lt;select class="listbox" id="availableUsers" multiple="multiple" name="availableUsers"&gt;
      &lt;option value="2"&gt;TestUser2&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>