title: Multi Select List Add/Remove Item issue in jquery
body: <p>I have two multi select list. I am trying to implementing such functionality where user can Add or Remove item from left side list to right side list. here is my code</p>
  
  <p>html --</p>
  
  <pre><code>&lt;select id="distriList" name="distriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;"&gt;
          &lt;option value="A"&gt;A&lt;/option&gt;
          &lt;option value="B"&gt;B&lt;/option&gt;
          &lt;option value="C"&gt;C&lt;/option&gt;
          &lt;option value="D"&gt;D&lt;/option&gt;
  &lt;/select&gt;
  &lt;a href="javascript:void(0);" id="addPop"&gt;Add&lt;/a&gt;
  &lt;a href="javascript:void(0);" id="removePop"&gt;Remove&lt;/a&gt;
  &lt;select id="selectDistriList" name="selectDistriList" multiple="multiple" style="width: 150px; height: 70px; margin: 0px 2px 0px 3px;"&gt;
          &lt;option value="E"&gt;E&lt;/option&gt;
          &lt;option value="F"&gt;F&lt;/option&gt;
          &lt;option value="G"&gt;G&lt;/option&gt;
          &lt;option value="H"&gt;H&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>and JS -</p>
  
  <pre><code>$('#addPop').click(function() {
      if ($('#distriList option:selected').val() != null) {
           $('#distriList option:selected').remove().appendTo('#selectDistriList');
           $("#distriList").attr('selectedIndex','-1').find("option:selected").removeAttr("selected");
           $("#selectDistriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
   } else {
      alert("Before add please select any position.");
                                          }
  });
  
  $('#removePop').click(function() {
         if ($('#selectDistriList option:selected').val() != null) {
               $('#selectDistriList option:selected').remove().appendTo('#distriList');
               $("#selectDistriList").attr('selectedIndex',  '-1').find("option:selected").removeAttr("selected");
               $("#distriList").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
               $("#distriList").attr('selectedIndex', '-1').addAttr("selected");
  } else {
     alert("Before remove please select any position.");
  }
  });
  </code></pre>
  
  <p>Check <a href="http://jsfiddle.net/w2sLB/" rel="nofollow"><strong>JSFiddle</strong></a> also </p>
  
  <p>Everything is working fine, but my problem is <strong>when i am selecting any item from left side and add it to right side, the added item is not getting selected in right side list. Same problem i am facing while removing also.</strong> </p>
  
  <p><strong>Expected Result :</strong> When ever add/remove perform, the added/removed item should be selected in list</p>
  
  <p>Any help ??</p>