Tenho o código:
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>
Como podem ver, quando selecionamos vários itens do primeiro select e clicamos em associar, ele passa para o segundo select os itens concatenados, por exemplo: Selecionando "Boletos" e "Usuários", e clicamos em Associar, ele preenche o segundo select como um item "BoletosUsuários", e queria que na verdade preenchesse o select com "Boletos" e logo abaixo "Usuários".
Pensei em fazer um array se itens selecionados e percorrer ele e pra cada item selecionado dava um append no select, mas não sei como fazer isso. Alguma dica de como ser feito?