Change the display form of selected items in select

Asked

Viewed 93 times

0

I have the select with search field and with all selected default values, as shown:

$(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>

The result inside the combobox is this way: inserir a descrição da imagem aqui

I wanted everything to be the same as in the picture, but instead of the X checkboxes appear marked, for example in this image: inserir a descrição da imagem aqui

html css

1 answer

1


This type of component is built in HTML as a default select, but when it is rendered in DOM the JS turns it actually into a UL/LI and place in the elements classes, ids, and aria atributes.

The "option" gets the class select2-selection__choice__remove, so I used this selector to pick up the item and put in it a pseudo element ::after to do the ✔ in place of X

OBS: Checkbox won’t work, because when you uncheck the item will disappear from the screen, so it doesn’t make sense to have a checkbox and you won’t be able to mark/cancel

inserir a descrição da imagem aqui

Follow the image code above.

<!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>

  • but the idea was to remove the "X" and get a checkbox as I put in the second image, it is possible?

  • @Bruno Cara, I was wrong, I got it wrong, I Edited the answer. Anyway, checkbox does not make sense, since once you click on it it disappears from the screen, so it does not make sense to use it, since you can not use it and uncheck it, since at the first click it would be gone

  • but look at this example, it appears like this: first user view form and so User deepen visualization](https://i.stack.Imgur.com/09jVJ.jpg), that’s what I meant. But in this way, the possibility of searching (possibility of writing the name) as in the example above, we no longer have. It is possible to do so?

  • @Bruno believe not, then you would have to change the CSS as I changed you would have to also change the Javascript of the plugin, he would have to when creating the list ul/li, also create a checkbox, and still "lynch" this checkbox with the list options, I believe it is something very complex to be done, I suggest you look for another component of select if you want an option of this type... or else you will have to manjar A lot of JS to do it you want

  • and there will be another select component that meets what I’m looking for?

  • 1

    @Bruno I think you were not very clear in your question, so I do not understand what you wanted... however this link should help you, I think it is what you are looking for https://codepen.io/faur/pen/vWVPGE

  • @hugocsl yes, that’s what I’m looking for

Show 2 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.