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

Navigation
1

I'm using the jQuery UI Multiselect plugin.

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

For example, I have a list of 5 items:

  • Group 1 Item
  • Group 2 Item
  • Another item Group 2
  • Another item Group 1
  • Group 3 Item

    • As you know, multiselect has two columns: selected on the left, and available ones on the right. Let's assume none of the above is selected.

    Outside of this multiselect, above or below, I need a button that, once clicked, 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, going to the selected column.

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

    Is it possible?

    Note: this is valid for removing selected ones as well

        
    asked by anonymous 06.02.2014 / 15:58

    2 answers

    1

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

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

    Example

        
    06.02.2014 / 17:08
    0

    It is very difficult to understand your question, however from what I understood you could do this:

    First, add classes to your groups, and set events on the buttons, such as suppose it to be: 

    <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 functions that would be select(elemento1,elemento2) and 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 is a full working example that 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:)

        
    06.02.2014 / 16:40
    JavaScript Function Error Frame How to take background-color from padding?