Selecionar campo select multiple sem usar o CTRL com jQuery

Publicado por: Vanderson da Silva
Postado: 06-08-2015
Atualizado:06-10-2016

Certo dia me deparei com a necessidade de trabalhar com um campo que pudesse ser selecionado várias opções, mas o que me incomodava era o fato de ter que pressionar CTRL+click para selecionar mais de uma vez, insatisfeito resolvi desenvolver uma solução com jQuery.

Segue trecho eleaborado:

Trecho html do campo multi selecionável

<select multiple="multiple" name="autoridade[]" size="6">
     <option value="186">Vanderson</option>
<option value="220">Joao</option>
<option value="235">Maria</option>
<option value="247">Paulo</option>
<option value="251">Pedro</option>
<option value="309">Vanderson</option>
</select>

 

Trecho script jQuery para selecionar os elementos no click

<script type="text/javascript">

var arrVal = []; var acesso = { //selecionar autoridades selecionarOpcao: function (elementOption) { //recupera o option clicado var element = $(elementOption); //recupera o valor var valueOption = element.val(); //verifica se o valor do option esta selecionado if ($.inArray(valueOption, arrVal) >= 0) { //desmarca o option e remove do array de selecionados element.removeAttr('selected'); var indice = arrVal.indexOf(valueOption); arrVal.splice(indice, 1); } else { //insere o valor do option no array de selecionados arrVal.push(valueOption); } var opcao = null; //marca como selecionado todos os itens do array $(arrVal).each(function (key, value) { opcao = $('select[name="autoridade[]"] option[value="' + value + '"]'); $(opcao).attr('selected', true); }); } } $(document).ready(function () { //selecao do local de oferta $(document).on('click', 'select[name="autoridade[]"] option', function () { acesso.selecionarOpcao(this); }); });
</script>

 

Veja como ficou o exemplo:

aqui