1

Estou usando o plugin jQuery UI Multiselect.

Como faço pra selecionar uma ou mais opções com um clique num botão fora do multiselect?

Por exemplo, tenho uma lista com 5 itens:

  1. Item Grupo 1
  2. Item Grupo 2
  3. Outro item Grupo 2
  4. Outro item Grupo 1
  5. Item Grupo 3

Como se sabe, o multiselect tem duas colunas: selected, à esquerda, e os disponíveis, à direita. Suponhamos que nenhum dos itens acima esteja selecionado.

Fora desse multiselect, acima ou abaixo, preciso de um botão que, ao clicar, seleciona um ou mais itens do multiselect de uma vez só.

Botões exemplo:

[Selecionar itens do Grupo 1]
[Selecionar itens do Grupo 2]
[Selecionar itens do Grupo 3]

Ao clicar no primeiro, os itens "Item Grupo 1" e "Outro item Grupo 1" devem ser selecionados, passando pra coluna selected.

Ao clicar no segundo, os itens "Item Grupo 2" e "Outro item Grupo 2" devem ser selecionados, passando pra coluna selected, sem sobrescrever os selecionados anteriormente.

É possível?

Obs.: isso vale pra remover selecionados também

3
  • Pelo que entendi, pretendes sempre seleccionar um grupo (Item Grupo 1 e Outro item Grupo 1, por exemplo) apenas com um clique, certo? 6/02/2014 às 15:08
  • Exato. Vai haver caso que eu seleciono diretamente um item no multiselect. 6/02/2014 às 15:32
  • Exclui minha resposta, pois não havia entendido de que se tratava de um plugin adicional.
    – utluiz
    6/02/2014 às 16:09

2 Respostas 2

1

Para selecionar várias opções precisa só de setar o "selected="true". Com jQuery pode usar: .prop('selected', true); ou false para remover.

E para saber o valor: $("#multiSelect").val()

Exemplo

3
  • Pelo que vi aqui, é isso mesmo! Porém, não consegui aplicar. Mas, obrigado. 6/02/2014 às 16:41
  • @xmdenis, se colocar o seu codigo no jsfiddle e postar a versão com o seu codigo eu posso ajudar a por a funcionar.
    – Sergio
    6/02/2014 às 16:43
  • O problema é que estou usando o Adminica e dentro dele, estou fazendo requisições ajax pra carregar o conteúdo do SELECT. Pra colocar isso aqui, vai ficar muito confuso. Agradeço o interesse. 6/02/2014 às 16:50
0

Está muito dificil de entender sua pergunta, porém pelo o que eu entendi você poderia fazer isto:

Primeiramente, adicione classes aos seus grupos, e defina eventos nos botões como por exemplo, suponhamos que seja assim:

<button onclick="select('.item_grupo1','.outroitem_grupo1');">Selecionar itens do grupo 1</button>
<button onclick="select('.item_grupo2','.outroitem_grupo2');">Selecionar itens do grupo 2</button>
<button onclick="select('.item_grupo3','.outroitem_grupo3');">Selecionar itens do grupo 3</button>
<button onclick="unselect('.item_grupo1','.outroitem_grupo1');">Deselecionar itens do grupo 1</button>
<button onclick="unselect('.item_grupo2','.outroitem_grupo2');">Deselecionar itens do grupo 2</button>
<button onclick="unselect('.item_grupo3','.outroitem_grupo3');">Deselecionar itens do grupo 3</button>
<ul class=listaNaoSelecionados>
  <li class=item_grupo1>item_grupo1</li>
  <li class=item_grupo2>item_grupo2</li>
  <li class=item_grupo3>item_grupo3</li>        
  <li class=outroitem_grupo1>outroitem_grupo1</li>
  <li class=outroitem_grupo2>outroitem_grupo2</li>
  <li class=outroitem_grupo3>outroitem_grupo3</li>        
</ul>

<ul class=listaSelecionados>
</ul>

Então, você teria duas funções que seriam a select(elemento1,elemento2) e a unselect(elemento1,elemento2):

function select(ele1,ele2){
  var clone = $(ele1).clone();
  $(ele1).remove();
  $('.listaSelecionados').append(clone);
  var clone2 = $(ele2).clone();
  $(ele2).remove();
  $('.listaSelecionados').append(clone2);
}

function unselect(ele1,ele2){
  var clone = $(ele1).clone();
  $(ele1).remove();
  $('.listaNaoSelecionados').append(clone);
  var clone2 = $(ele2).clone();
  $(ele2).remove();
  $('.listaNaoSelecionados').append(clone2);
}

Aqui está um exemplo completo funcionando que fiz no JSFiddle

Óbvio que isto seria um exemplo mas como base disso tenho certeza que você conseguirá adaptar para o seu caso :)

3
  • 1
    Mas seria aplicável ao jQuery UI Multiselect? Essa é a questão. 6/02/2014 às 15:42
  • 1
    Você não postou nenhum código HTML, não tenho como advinhar seu código por isso postei um exemplo, se você acha que não tem como aplicar esta logica em seu multiselect, edite sua pergunta e poste o seu HTML nela, para que eu possa lhe ajudar 6/02/2014 às 15:44
  • O caso é que o plugin multiselect se comporta diferente. Tentei um monte de coisas. É esse aqui: quasipartikel.at/multiselect 6/02/2014 às 15:52

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 .