Add Remove To Select Field

by snicolaou

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<form>  
  
  <div class="form-row">
    <div class="form-group col-md-5">
      <label for="UserList">Available Users:</label>
      <select class="form-control" name="UserList" size=10 id="UserList" >
        <option value="UserA">User A</option>
        <option value="UserB">User B</option>
        <option value="UserC">User C</option>
        <option value="UserD">User D</option>
      </select>
    </div>
  
  <div class="col-md-2">      
      <button type="button" onclick="onAddClicked()" class="btn btn-success btn-block" style="margin-top:33px">Add &gt;&gt;</button>
      <button type="button" class="btn btn-danger btn-block" style="margin-top:33px">&lt;&lt; Remove</button>      
    </div>  
  
  <div class="form-group col-md-5">
      <label for="DistributionList">Distribution List Members:</label>
      <select class="form-control" name="DistributionList" size=10 id="DistributionList">
      </select>
    </div>
  </div>   
</form>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

function onAddClicked() {
  var userList = document.getElementById("UserList");
  var distributionList = document.getElementById("DistributionList");

  var newMember = document.createElement('option');  
  newMember.value = userList.options[userList.selectedIndex].value;
  newMember.innerHTML = userList.options[userList.selectedIndex].text;

  distributionList.appendChild(newMember);
}