older version of column transfer

by Joe Saad

HTML

<select name="select" size="10" class="left" id="colA" multiple="multiple">
    <option value="A">Indianapolis</option>
    <option value="B">Los Angeles</option>
    <option value="C">New York City</option>
    <option value="D">Yerevan</option>
    <option value="E">Moscow</option>
    <option value="F">New Delhi</option>
    <option value="G">San Francisco</option>
  </select>
<div id="nav">
    <button type="text" value="right">&#187;</button><br />
    <button type="text" value="left">&#171;</button>
</div>

  <select name="select" size="10" class="right" id="colB" multiple="multiple">
    
  </select>

CSS

select {width:120px; margin-right:10px; float:left;}
button {vertical-align:top;}
#nav {float:left; border:0px solid blue; margin-right:10px;margin-top:30px;}

JavaScript

$(document).ready(function() {
    $("button").click(function() {
        var dest = $(this).val();
        var src = $("select").not("." + dest).attr('class');
        $("." + dest).append($("." + src + " option:selected"));
        $("." + src + " option:selected").remove();
    });

});