jQuery: Multiselect List with controls

Move options from lists, the selected list can be reordered.

by Porfirio Chavez

HTML

<div class="palette">
    <div class="choices">
        <h4>Available</h4>
        <select multiple="true" class="unselected" style="width: 100%; height: 100%;">
            <option>bla</option>
            <option>ble</option>
            <option>bli</option>
            <option>blo</option>
            <option>fra</option>
            <option>fre</option>
            <option>fri</option>
            <option>fro</option>
        </select>
    </div>
    <div class="controls">
        <input type="button" class="add" value=">" />
        <input type="button" class="remove" value="<" />
        <br>
        <input type="button" class="down" value="v" />
        <input type="button" class="up" value="^" />
    </div>
    <div class="choices">
        <h4>Selected</h4>
        <select multiple="true" class="selected" style="width: 100%; height: 100%;" id="lista">
        </select>
    </div>
    <br>
    <p>selected values: <span id="selectedValues"></span></p>
    <hr>
    <p>Note: Reorder only apply on selected list</p>
</div>

CSS

h4 {
  background-color: #a5aeff;
  margin: 0;
  text-align: center;
}

#selectedValues {
  font-weight: bold;
}

div.choices {
    display: inline-block;
    vertical-align: middle;
    height: 150px;
    width: 120px;
    background-color: red;
}

div.controls {
    display: inline-block;
    width: 25px;
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: middle;
}

JavaScript

var selectedValues = [];

function addValue(){
  var values = [];
  $('.unselected :selected').each(function(i, selected){ 
    values[i] = $(selected).text();
  });

  for($i = 0; $i < values.length; $i++){ 
    var option = values[$i];
    selectedValues.push(option);
    $("#selectedValues").html(selectedValues.join(', '));
  }
}

function removeValue(){
  var values = []; 
  $('.selected :selected').each(function(i, selected){ 
    values[i] = $(selected).text(); 
  });

  for($i = 0; $i < values.length; $i++){ 
    var index = selectedValues.indexOf(values[$i]);
    selectedValues.splice(index, 1);
    $("#selectedValues").html(selectedValues.join(', '));
  }
}

function refreshSelectedValues(){
  var values = []; 
  $('.selected option').each(function(i, selected){
    values[i] = $(selected).text(); 
  });
  
  selectedValues = values;
  $("#selectedValues").html(selectedValues.join(', '));
}

$(document).ready(function() {
	$('.palette .add').on('click', function(e) {
      e.preventDefault();
      var options = $('select.unselected option:selected');
      var selectedValue = options.val();
      addValue();
      $('select.selected').append(options);
      return false;
      });
  
  $('.palette .remove').on('click', function(e) {
      e.preventDefault();
      var options = $('select.selected option:selected');
      var selectedValue = options.val();
      removeValue();
      $('select.unselected').append(options);
      return false;
    });
    
  $('.palette .down').on('click', function(e) {
      e.preventDefault();
      var options = $('select.selected option:selected');
      options.last().next().after(options);
      refreshSelectedValues();
      return false;
    });
  
  $('.palette .up').click(function(e) {
  		e.preventDefault();
      var options = $('select.selected option:selected');
      options.first().prev().before(options);
      refreshSelectedValues();
      return false;
    });
});