JSFiddle - React, Tailwind, and code Playground

by ruslan_savenok

HTML

<form action="">
    <select multiple="true" class="left-select">
      <option value="1">option 1</option>
      <option value="2">option 1</option>
      <option value="3">option 1</option>
      <option value="4">option 1</option>
      <option value="5">option 1</option>
      <option value="6">option 1</option>
      <option value="7">option 1</option>
      <option value="8">option 1</option>
      <option value="9">option 1</option>
      <option value="10">option 1</option>
      <option value="11">option 1</option>
      <option value="12">option 1</option>
      <option value="13">option 1</option>
      <option value="14">option 1</option>
      <option value="15">option 1</option>
      <option value="16">option 1</option>
    </select>

    <div class="buttons">
      <button class="add">Add</button>
      <button class="remove">Remove</button>
    </div>

    <select multiple="true" class="right-select" name="selected-options">

    </select>

    <button type="submit">Submit</button>
  </form>


<div class="console">
    
</div>

CSS

select {
  margin: 20px;
  width: 200px;
  height: 200px;
  float: left;
}

.buttons {
  width: 60px;
  float:  left;
}

button {
  margin: 20px 0 0 0;
  display: block;
  clear: both;
}

JavaScript

$(document).ready(function () {
  
  var $addBtn = $('.add');
  var $removeBtn = $('.remove');

  var $leftSelect = $('.left-select');
  var $rightSelect = $('.right-select');

  var fName = $rightSelect.attr('name');
  $rightSelect.attr('name', '');

  $addBtn.click(function (e) {
    e.preventDefault();
    $rightSelect.append($leftSelect.find('option:selected'));
  });

  $removeBtn.click(function (e) {
    e.preventDefault();
    $leftSelect.append($rightSelect.find('option:selected'));
  });


  $('form').bind('submit.selectTransfer', function (e) {
    e.preventDefault();

    $(this).find('input[name="' + fName + '[]"]').remove();

    var hidden = [];

    $rightSelect.find('option').each(function () {
      var $hdn = '<input type="hidden" name="' + fName + '[]" value="' + $(this).val() + '" />';
      hidden.push($hdn);
    });

    $(this).append(hidden.join(''));

    $('.console').html('');

    var dataArr = $(this).serializeArray();

    for (var i in dataArr) {
      $('.console').append(dataArr[i].name + '  =  ' + dataArr[i].value + '<br />');
    }
  });
});