How to select one or more items in the jQuery UI Multiselect plugin?

Question

I’m using the plugin jQuery UI Multiselect.

How do I select one or more options with a click of a button outside of multiselect?

For example, I have a list of 5 items:

1. Item Group 1
2. Item Group 2
3. Other item Group 2
4. Other item Group 1
5. Item Group 3

As you know, multiselect has two columns: Selected, to the left, and to the right. Suppose that none of the above are selected.

Outside of this multiselect, above or below, I need a button that, when clicking, selects one or more multiselect items at once.

Example buttons:

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

When clicking on the first one, the items "Item Group 1" and "Other item Group 1" should be selected, passing to the column Selected.

When clicking on the second, the items "Item Group 2" and "Other item Group 2" should be selected, passing to the column Selected, without overwriting the previously selected ones.

It is possible?

Note: this goes for removing selected also

Answer 1

To select several options you only need to set the "Selected="true". With jQuery you can use: .prop('selected', true); or false to remove.

And to know the value: $("#multiSelect").val()

Example

Answer 2

It’s very difficult to understand your question, but from what I understand you could do it:

First, add classes to your groups, and define events in buttons such as, let’s suppose:

<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>

So you would have two roles that would be the select(elemento1,elemento2) and the 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);
}

Here’s a full working example I did on Jsfiddle

Obviously this would be an example but as a basis of this I’m sure you’ll be able to adapt to your case :)