title: How do you move items betwen two listboxes on MVC - JQuery not working
body: <p>I have looked at other SO topics on this and they end up being either really old or using WebForms. I have an MVC view in which I have two listboxes. I want to move items back and forth between the two listboxes. The View is:</p>
  
  <pre><code>  @using (Html.BeginForm())
      {
         @Html.ListBoxFor(m =&gt; m.SelectedAttributes, Model.Attributes, new {id="listBoxAvail", SIZE = 5} ) 
  
          &lt;input type="submit" name="add" 
                 id="add" value="MoveRight" /&gt;
  
          &lt;input type="submit" name="remove" 
                 id="remove" value="MoveLeft" /&gt;
  
          @Html.ListBoxFor(m =&gt; m.SelectedAttributes2, Model.SelectedItems, new { id = "listBoxSel", SIZE = 5})
      } 
  </code></pre>
  
  <p>The ViewModel is:</p>
  
  <pre><code>    public class OptInViewModel
          {
              public IEnumerable&lt;string&gt; SelectedAttributes { get; set; }
              public IEnumerable&lt;string&gt; SelectedAttributes2 { get; set; }
              public IEnumerable&lt;SelectListItem&gt; Attributes { get; set; }
              public IEnumerable&lt;SelectListItem&gt; SelectedItems { get; set; }
          }
  
  And the Controller code is:
  
   public ActionResult Index()
          {
              AttributeEntities db = new AttributeEntities();
              List&lt;SelectListItem&gt; listSelectListItems = new List&lt;SelectListItem&gt;();
              List&lt;SelectListItem&gt; listSelItems = new List&lt;SelectListItem&gt;();
  
              foreach (var attributes in db.HarmonyAttributes)
              {
                  SelectListItem selectList = new SelectListItem
                  {
                      Text = attributes.AttributeName,
                      Value = attributes.AtrributeLabel,
                      Selected = false
                  };
                  listSelectListItems.Add(selectList);
              }
  
              foreach (var sel in db.SelectedHarmonyAttributes)
              {
                  SelectListItem selList = new SelectListItem
                  {
                      Text = sel.CustomLabel,
                      Value = sel.HarmonyAttribute_ID.ToString(),
                      Selected = false
                  };
                  listSelectListItems.Add(selList);
              }
  
              OptInViewModel viewModel = new OptInViewModel
              {
                  Attributes = listSelectListItems,
                  SelectedItems = listSelItems
              };
  
  
              return View(viewModel);
          }
  </code></pre>
  
  <p>I used JQuery to try to do this but it's not working (nothing gets transferred to 2nd listbox). Anyone kinow what's wrong?</p>
  
  <pre><code>&lt;script src="~/Scripts/jquery-2.1.1.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function () {
              $("add").click(function () {
                  $("#listBoxAvail &gt; option:selected").each(function () {
                      $(this).remove().appendTo("#listBoxSel");
                  });
              });
  
              $("remove").click(function () {
                  $("#listBoxSel &gt; option:selected").each(function () {
                      $(this).remove().appendTo("#listBoxAvail");
                  });
              });
          });
  &lt;/script&gt;
  </code></pre>