2

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?

1 Resposta 1

1

O resultado é esperado pois você captura o texto que existe em todos os elementos, mas não os elementos em si, e insere em uma nova opção dentro da lista "Minhas permissões". O código JavaScript correto seria

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

associar.click(function() {
  minhasPermissoes.append(permissoes.find('option:selected'));
});

desassociar.click(function() {
  permissoes.append(minhasPermissoes.find('option:selected'));
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .