0

Tenho o select com campo de pesquisa e com todos os valores selecionados de padrão, como mostro:

$(document).ready(function() {
   $(".meuselect").select2();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<div style="margin-top: 4%;">
<form action="post"> 
   <select style="width:300px;" data-placeholder="Selecione Utente" class="form-control meuselect" name="Utente[]" id="Utente" multiple>
		<option value="UM" selected="selected">UM</option>
		<option value="Dois" selected="selected">Dois</option>
    <option value="Três" selected="selected">Três</option>
    <option value="Quatro" selected="selected">Quatro</option>
    <option value="Cinco" selected="selected">Cinco</option>
    <option value="Seis" selected="selected">Seis</option>
    <option value="Sete" selected="selected">Sete</option>
    <option value="Oito" selected="selected">Oito</option>
    <option value="Nove" selected="selected">Nove</option>
    <option value="Dez" selected="selected">Dez</option>
    <option value="Onze" selected="selected">Onze</option>
    <option value="Doze" selected="selected">Doze</option>
    <option value="Treze" selected="selected">Treze</option>
    </select>
</form>
</div>

O resultado dentro da combobox fica desta forma: inserir a descrição da imagem aqui

Pretendia que ficasse tudo igual como na imagem, mas em vez de aparecer o X aparecessem checkboxes marcadas, como por exemplo nesta imagem: inserir a descrição da imagem aqui

1 Resposta 1

1

Esse tipo de componente é construido no HTML como um select padrão, mas quando é renderizado no DOM o JS transforma ele na verdade em uma UL/LI e coloca nos elementos classes, ids, e aria atributes.

O "option" fica com a classe select2-selection__choice__remove, então eu usei esse seletor para pegar o item e coloquei nele um pseudo elemento ::after para fazer o no lugar do X

OBS: Checkbox não vai funcionar, pq quando vc desmarcar o item vai sumir da tela, então não faz sentido tem um checkbox sendo que vc não vai poder marcar/desmarcar

inserir a descrição da imagem aqui

Segue o código da imagem acima.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.css" rel="stylesheet" />
<style>
.select2-selection__choice__remove {
  position: relative;
  font-size: 0;
  padding-left: 16px;
}
.select2-selection__choice__remove::after {
  font-size: 12px;
  content: "✔";
  position: absolute;
  top: -13px;
  left: 2px;
  vertical-align: middle;
}
</style>
</head>

<body>


<div style="margin-top: 4%;">
  <form action="post">
    <select style="width:300px;" data-placeholder="Selecione Utente" class="form-control meuselect" name="Utente[]" id="Utente" multiple>
      <option value="UM" selected="selected">UM</option>
      <option value="Dois" selected="selected">Dois</option>
      <option value="Três" selected="selected">Três</option>
      <option value="Quatro" selected="selected">Quatro</option>
      <option value="Cinco" selected="selected">Cinco</option>
      <option value="Seis" selected="selected">Seis</option>
      <option value="Sete" selected="selected">Sete</option>
      <option value="Oito" selected="selected">Oito</option>
      <option value="Nove" selected="selected">Nove</option>
      <option value="Dez" selected="selected">Dez</option>
      <option value="Onze" selected="selected">Onze</option>
      <option value="Doze" selected="selected">Doze</option>
      <option value="Treze" selected="selected">Treze</option>
    </select>
  </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

<script>
  $(document).ready(function() {
    $(".meuselect").select2();
  });
</script>

</body>

</html>

7
  • mas a ideia era retirar o "X" e ficar uma checkbox como coloquei na segunda imagem, é possível?
    – Bruno
    2/12/2019 às 11:02
  • @Bruno Cara, foi mal, entendi errado, dei uma Editada na resposta. De qq forma, checkbox não faz sentido, já que uma vez que vc clica nele ele some da tela, então não faz sentido usa-lo, já que não da para mara-lo e desmarca-lo, já que no primeiro clique ele já sumiria
    – hugocsl
    2/12/2019 às 11:17
  • mas veja este exemplo, aparece assim: primeira forma de visualização do utilizador e assim Utilizador aprofundar visualização](i.stack.imgur.com/09jVJ.jpg), era assim que pretendia. Mas desta forma, a possibilidade de pesquisa (possibilidade de escrever o nome) como no exemplo acima, deixamos de ter. É possível fazer desta forma?
    – Bruno
    2/12/2019 às 12:07
  • @Bruno acredito que não, ai vc teria que além de mudar o CSS como eu mudei vc teria que mudar também o JavaScript do plugin, ele teria que ao criar a listagem ul/li, também criar um checkbox, e ainda "lincar" esse checkbox com as opções da lista, acredito ser algo bem complexo de ser feito, sugiro que vc procure outro componente de select caso vc queira uma opção desse tipo... ou então vc vai ter que manjar MUITO de JS para fazer isso que vc quer
    – hugocsl
    2/12/2019 às 12:15
  • 1
    @Bruno acho que vc não foi muito claro na sua pergunta, por isso creio não ter entendido direito o que vc queria... de qq forma esse link deve te ajudar, acho que é o que vc está procurando codepen.io/faur/pen/vWVPGE
    – hugocsl
    2/12/2019 às 12:35

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 .