5

Estou tentando fazer um script para selecionar várias options de um <select multiple> a cada clique do mouse. Até ai tudo bem, eu consegui e segue o código:

var numSelected = 0;
var valSelectedArray = [];

$(document).on('mouseup', '#CentroCusto_new option', function () {
    var valSelected = $(this).val();
    valSelectedArray[numSelected] = valSelected;
    numSelected++;

    for (i = 0; i < numSelected; i++) {
            $("#CentroCusto_new option[value=" + valSelectedArray[i] + "]").prop("selected", true);
    }
});

Porém, eu gostaria que ao clicar em um já selecionado ele desselecionasse.

Meu algoritmo está bem ruim e ele dá um efeito de 'piscar' sempre que clico em uma nova option, ou seja, ele mostra um apenas selecionado na hora do clique para depois adicionar os outros que já foram clicados anteriormente, isso também não ficou legal.

Alguém tem alguma ideia de como incrementar a opção desselecionar no meu código, ou então mostrar um código mais eficiente?

OBS: NÃO QUERO UTILIZAR NENHUM PLUGIN.

5
  • Você não quer o modo de seleção normal com CTRL, é isso?
    – bfavaretto
    Commented 12/02/2014 às 16:17
  • Você tem um multipleselect (plugin jQuery) ou está a fazer o seu próprio? dá para adicionar o HTML?
    – Sergio
    Commented 12/02/2014 às 16:26
  • Sim, não quero que o usuário precise usar o Ctrl. O html não se faz necessário pois ele é simples e com conteúdo dinamico, o id é #CentroCusto_new. Esse post é sobre um plugin, já havia entrado nele, mas quero o meu próprio.
    – Joao Paulo
    Commented 12/02/2014 às 16:29
  • Vou quebrar a cabeça mais um pouco e caso consiga posto o resultado aqui.
    – Joao Paulo
    Commented 12/02/2014 às 17:05
  • Seria legal adicionar ao título da pergunta, e deixar bem claro, que é sem o Ctrl, algo como (sem o Ctrl). Provavelmente essa pergunta será usada por pessoas no futuro :) Commented 12/02/2014 às 17:38

2 Respostas 2

4

Tente isto:

$('select#CentroCusto_new option').on('mousedown', function (event) {
    this.selected = !this.selected;
    event.preventDefault();
});

Com isso, assim que você apertar o botão do mouse (mousedown) em cima do elemento, a opção selected recebe o oposto do estado anterior da mesma.

O event.preventDefault() faz com que a ação padrão associada a aquele evento não seja acionada/ativada.

Por exemplo, se o evento fosse sobre uma tag <a href="http://testlink.com">, você não seria direcionado para uma nova Url.

No nosso caso, o preventDefault faz com que a ação (padrão) de desmarcar todas as outras entradas quando você clica em um item (sem o Ctrl) não seja executada. Note que desabilitar a ação padrão também faz com que o item não seja selecionado automaticamente, por isso a necessidade do this.selected = !this.selected;

Mais informações sobre o preventDefault aqui.

Prova de conceito:

http://jsfiddle.net/RkJS7/2/

2
  • Perfeito! Poderia dar uma breve explicação sobre o preventDefault? e o parametro "e" o que é?
    – Joao Paulo
    Commented 12/02/2014 às 18:35
  • 1
    @JoaoPaulo Adicionei as explicações que você pediu :) Commented 12/02/2014 às 19:29
-1

João Paulo, por padrão um <select multiple> pode ter vários elementos selecionados ou desselecionados usando ctrl + click, e também arrastando o clique do mouse.

3

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 .