How to create an association form (Picklist) in modal?

Question

How to make the screen below in modal.

Remembering that the boxes are multiple selection, and how to do that by clicking the button Associar > move to the right column the values I selected on the left and vice versa when clicking on < Desassociar? It can be in jQuery or even Javascript.

Answer 1

The whole process is quite simple, first you need to have two select’s with the Multiple attribute and two buttons to carry out the associations, all you will do is take the selected item and add in the other select and then remove the option from the previous!

In bootstrap you can use form-control to give an additional formatting.

Example:

var associar = $("#associar");
var desassociar = $("#desassociar");
var permissoes = $("#permissoes");
var minhasPermissoes = $("#minhasPermissoes");


associar.click(function() {
  var selecionado = permissoes.find('option:selected');
  minhasPermissoes.append('<option>' + selecionado.text() + '</option>');
  selecionado.remove();
});

desassociar.click(function() {
  var selecionado = minhasPermissoes.find('option:selected');
  permissoes.append('<option>' + selecionado.text() + '</option>');
  selecionado.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <label>Permissões</label>
      <select id="permissoes" class="form-control" multiple>
        <option>Clientes</option>
        <option>Boletos</option>
        <option>Usuários</option>
        <option>Configurações</option>
      </select>
    </div>
    <div class="col-md-6">
      <label>Minhas Permissões</label>
      <select id="minhasPermissoes" class="form-control" multiple>
      </select>
    </div>
  </div>
  <br>
  <button id="associar" class="btn btn-primary">Associar</button>
  <button id="desassociar" class="btn btn-primary">Desassociar</button>

</div>

See also working on jsfiddle

To add in a modal is very simple too, the bootstrap documentation itself has excellent examples of this.

See working with modal on jsfiddle

Documentation Bootstrap-Modal

You can also use a plugin I developed, just include the pickList.js create a div and call $("#pickList").pickList();

Github - Documentation

Example jsfiddle