dual list box problem by joe

by Joe

HTML

<div class="col-xs-4">
  Items to select
  <select id="lstBox1" multiple="multiple" class="form-control" size=10>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
  </select>
</div>
<div class="col-xs-2">
  <a id="btnRight" class="btn btn-block btn-primary">Add</a>
  <a id="btnLeft" class="btn btn-block btn-primary">Remove</a>
  <a id="btnRightall" class="btn btn-block btn-primary">Add all</a>
  <a id="btnLeftall" class="btn btn-block btn-primary">Remove all</a>

</div>

<div class="col-xs-4">
  Selected Items
  <select id="lstBox2" multiple="multiple" class="form-control" size=10>

  </select>
</div>

<input id="values" class="form-control" placeholder="Output IDs separated by commas here">

JavaScript

$(document).ready(function() {
  $('#btnRight').click(function(e) {
    var selectedOpts = $('#lstBox1 option:selected');
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }

    $('#lstBox2').append($(selectedOpts).clone());
    //$(selectedOpts).remove();
    e.preventDefault();
    updateIDs();
  });

  $('#btnLeft').click(function(e) {
    var selectedOpts = $('#lstBox2 option:selected');
    if (selectedOpts.length == 0) {
      alert("Nothing to move.");
      e.preventDefault();
    }

    //$('#lstBox1').append($(selectedOpts).clone());
    $(selectedOpts).remove();
    e.preventDefault();
    updateIDs();
  });
});

function updateIDs() {
  $('#values').val('');
  $('#lstBox2 option').each(function(index) {
    console.log($(this).val());
    $('#values').val($('#values').val() + $(this).val() + ",");
  });
}