5

tenho o seguinte <select>:

<select id="multiselect" multiple="multiple">
  <option value="pedra">Pedra</option>
  <option value="papel">Papel</option>
  <option value="tesoura">Tesoura</option>
</select>

Com o código Jquery abaixo, consigo obter o valor do último <option> selecionado:

<script type="text/javascript">
  $(document).ready(function() {
    $('#multiselect').multiselect();

    $(document).on('change','#multiselect', function(){

        console.log (( $('option', this).filter(':selected:last').val() ))
    });
  });
</script>

Porém, o que eu queria de verdade, era obter o valor do <option> clicado (sei que on('click', func..) não funcionará neste caso), independente se está sendo selecionado ou desselecionado.

Pesquisei bastante, mas o máximo que encontrei, foi como encontrar o valor do último selecionado.

O plugin utilizado é o Bootstrap-multiselect

2
  • 1
    Não sei ao certo se é isto que pretendes, mas vê este JSFiddle com um exemplo daquilo que me parece ser o que procuras.
    – Zuul
    Commented 11/02/2014 às 15:14
  • @Zull, o conceito é exatamente este. Li a documentação do plugin, e adaptei. Obrigado por ajudar. Commented 11/02/2014 às 18:02

3 Respostas 3

6

Tente usar assim:

$('#multiselect').multiselect();
$("#multiselect").on("multiselectclick", function (event, ui) {
    console.log(ui.value);
});

Exemplo

Encontrei isto na documentação:

$("#multiselect").on("multiselectclick", function(event, ui) {
  /* event: the original event object
     ui.value: value of the checkbox
     ui.text: text of the checkbox
     ui.checked: whether or not the input was checked or unchecked (boolean)
  */
});
0
0

Para conseguir o efeito que espera, você precisa colocar um handler para cada elemento option:

$("#multiselect").on("click", "option", function() {
    var clickedOption = $(this);
    alert(clickedOption.val());
});

Exemplo do código em funcionamento:

http://jsfiddle.net/ryNFE/2/

Exemplo com console.log (sem o alert):

$("#multiselect").on("click", "option", function() {
    var clickedOption = $(this);
    console.log(clickedOption.val());
});
6
  • Nesse código se você segurar o ctrl para desmarcar o item, ele vai dar o alerta também. Commented 11/02/2014 às 16:38
  • @GabrielGartz então você precisa mudar sua pergunta: "Porém, o que eu queria de verdade, era obter o valor do <option> clicado (sei que on('click', func..) não funcionará neste caso), independente se está sendo selecionado ou desselecionado." Commented 11/02/2014 às 17:29
  • @GabrielGartz então não consegui entender qual o problema, se a solução retorna exatamente o que você pediu na pergunta. Commented 11/02/2014 às 17:41
  • 2
    @OniltonMaciel A pergunta foi colocada pelo Eric Vieira. Penso que o Gabriel Gartz está apenas a alertar para um detalhe na tua solução que pode causar algum transtorno.
    – Zuul
    Commented 11/02/2014 às 17:48
  • 1
    Ok, confusão minha, achei que era o autor. Obrigado pelo esclarezimento @Zuul. De qualquer forma, só para esclarecer, segurando o ctrl aqui (para mim pelo menos), não causa o evento de click por si só. A não ser que você faça Ctrl+Click. Mas nesse caso você está efetuando um click e ação deve ser ativada, "independente se o item está sendo selecionado ou desselecionado", conforme requisitado na pergunta. Commented 11/02/2014 às 17:54
0

RESOLVIDO

Pessoal, obrigado pela atenção de vocês. O plugin que estou usando é o Bootstrap-Multiselect. Não sei se existe uma solução mais elegante e melhor, mas, consegui resolver assim:

 $(document).ready(function() {
  $('#multiselect').multiselect({
    onChange: function(element, checked) {
      console.log(element[0]['value']);
    }
  });
});
2
  • Você pode marcar sua resposta como aceita aí do lado esquerdo.
    – Maniero
    Commented 12/02/2014 às 14:14
  • Só após dois dias. =) Commented 12/02/2014 às 17:34

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 .