Comment utiliser la case à cocher dans Select Option

94

Le client m'a donné un design qui a un menu Sélectionner une option contenant une case à cocher avec le nom de l'élément en tant qu'éléments individuels dans la liste. Est-il possible de toute façon d'ajouter une case à cocher dans un menu Sélectionner une option?

NB: Le développeur doit ajouter son propre identifiant pour rendre le menu efficace, je n'ai besoin du code HTML CSS que si c'est possible.

javascript html css html-select Héros Tra
la source
5
"Je n'ai besoin du code HTML CSS que si c'est possible de toute façon" ... oui, c'est possible ... il vous suffira de le coder vous-même ou de le rechercher sur Google
fmodos
5
@fmodos Possible? Veuillez nous lancer une démo, et OP - regardez ceci ... Ce n'est pas possible avec CSS et HTML uniquement
Mr. Alien
S'il vous plaît lire cet article 1stwebdesigns.com/blog/development/…
kuldeep raj
@ Mr.Alien j'ai mal compris ... Je pensais qu'il demandait un composant qui "pourrait" être HTML CSS et non "devait" être uniquement "HTML CSS" ... mon mauvais: /
fmodos

Réponses:

188

Vous ne pouvez pas placer de case à cocher à l'intérieur de l'élément de sélection, mais vous pouvez obtenir la même fonctionnalité en utilisant HTML, CSS et JavaScript. Voici une solution de travail possible. L'explication suit.

entrez la description de l'image ici

Code:

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
</form>
Développer l'extrait

Explication:

Au début, nous créons un élément de sélection qui affiche le texte "Sélectionnez une option", et un élément vide qui recouvre (chevauche) l'élément de sélection ( <div class="overSelect">). Nous ne voulons pas que l'utilisateur clique sur l'élément de sélection - il afficherait une option vide. Pour chevaucher l'élément avec un autre élément, nous utilisons la propriété de position CSS avec une valeur relative | absolu.

Pour ajouter la fonctionnalité, nous spécifions une fonction JavaScript qui est appelée lorsque l'utilisateur clique sur le div qui contient notre élément de sélection ( <div class="selectBox" onclick="showCheckboxes()">).

Nous créons également un div qui contient nos cases à cocher et le stylisons en utilisant CSS. La fonction JavaScript mentionnée ci-dessus change simplement la <div id="checkboxes">valeur de la propriété d'affichage CSS de "aucun" à "bloc" et vice versa.

La solution a été testée dans les navigateurs suivants: Internet Explorer 10, Firefox 34, Chrome 39. Le navigateur doit avoir JavaScript activé.

Plus d'information:

Positionnement CSS

Comment superposer un div sur un autre div

http://www.w3schools.com/css/css_positioning.asp

Propriété d'affichage CSS

http://www.w3schools.com/cssref/pr_class_display.asp

vitfo
la source
1
FYI: Cette solution nécessitera plus d'efforts si plusieurs listes de sélection doivent être modifiées. Je suggère d'aller chercher un plugin activement maintenu.
comment obtenir la valeur des cases à cocher sélectionnées? Très bonne réponse mais ce serait très utile si vous fournissez plnkr ou quelque chose comme ça.
Pardeep Jain
7
également pour sélectionner la boîte ne disparaît pas lorsque l'utilisateur sélectionne des options
Pardeep Jain
1
Cette réponse est excellente et cela a fonctionné pour moi. Il y a cependant une amélioration que j'y ai apportée. Au lieu de la overselectdiv qui pourrait potentiellement causer des problèmes dans une interface complexe que j'ai utilisée <option selected hidden>Select an option</option>. Ce n'est peut-être pas la meilleure utilisation, hiddenmais cela fonctionne.
Syknapse
2
mais comment masquer la liste déroulante, quand on clique à l'extérieur?
saurabh kumar
58

Le meilleur plugin à ce jour est Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>jQuery Multi Select Dropdown with Checkboxes</title>

<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>

</head>

<body>

<form id="form1">

<div style="padding:20px">

<select id="chkveg" multiple="multiple">

    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>

</select>

<br /><br />

<input type="button" id="btnget" value="Get Selected Values" />

<script type="text/javascript">

$(function() {

    $('#chkveg').multiselect({

        includeSelectAllOption: true
    });

    $('#btnget').click(function(){

        alert($('#chkveg').val());
    });
});

</script>

</div>

</form>

</body>
</html>

Voici la DEMO

$(function() {

  $('#chkveg').multiselect({
    includeSelectAllOption: true
  });

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});
.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="https://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="https://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>

<form id="form1">
  <div style="padding:20px">

    <select id="chkveg" multiple="multiple">
      <option value="cheese">Cheese</option>
      <option value="tomatoes">Tomatoes</option>
      <option value="mozarella">Mozzarella</option>
      <option value="mushrooms">Mushrooms</option>
      <option value="pepperoni">Pepperoni</option>
      <option value="onions">Onions</option>
    </select>
    
    <br /><br />

    <input type="button" id="btnget" value="Get Selected Values" />
  </div>
</form>
Développer l'extrait

pmrotule
la source
1
Vous n'avez pas besoin d'utiliser ces nombreuses bibliothèques pour votre solution. Vous pouvez simplement utiliser l'option de sélection multiple HTML standard. Merci!
Power Star
3
Je sais que je peux utiliser l'option de sélection multiple HTML, mais je l'ai trouvée moche et peu conviviale.
pmrotule
4
J'aime le comportement de ce plugin, mais je veux l'utiliser sans bootstrap ... quelque chose de similaire?
singpolyma
ce plugin est tellement bogué ... ils ont 150 problèmes ouverts et le responsable a dit qu'il n'avait pas le temps. donc après quelques problèmes, je suis passé à la réponse acceptée et à la vue
Oleg Abrazhaev
1
@Erbureth Les chemins de script / feuille de style externes étaient obsolètes dans la démo (liens morts). J'ai mis à jour les URL pour le corriger.
pmrotule
18

Pour une approche Pure CSS , vous pouvez utiliser le :checkedsélecteur combiné avec le ::beforesélecteur pour insérer du contenu conditionnel.

Ajoutez simplement la classe select-checkboxà votre selectélément et incluez le CSS suivant:

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

Vous pouvez utiliser d'anciens caractères Unicode simples (avec un encodage hexadécimal échappé ) comme ceux-ci:

Ou si vous voulez pimenter les choses, vous pouvez utiliser ces glyphes FontAwesome

Capture d'écran

Démo dans jsFiddle & Stack Snippets

Afficher l'extrait de code

Remarque : méfiez - vous des problèmes de compatibilité IE cependant

KyleMit
la source
1
C'est un problème lorsque l' multipleattribut fait <select>ressembler à une boîte au lieu d'une liste déroulante ...
vsync
@vsync, pouvez-vous expliquer le problème que vous rencontrez, peut-être même fourrer le violon et inclure une capture d'écran. Le but ici est de s'appliquer à un <select multiple>élément, donc cela devrait être le cas d'utilisation prévu. Les sélecteurs CSS doivent être spécifiques à l'application de cette classe afin que vous décidiez de l'utiliser sur des éléments individuels en appliquant la .select-checkboxclasse
KyleMit
1
Je recommande vivement cette solution élégante si vous recherchez une approche CSS pure.
Anish Sana
@KyleMit Belle solution !!! mais le problème est que si je veux sélectionner plusieurs éléments, je dois utiliser le bouton Ctrl comme l'élément de sélection simple.
Lalit Rajput
@LalitRajput, bien sûr, que la conception d'interaction par défaut pour tous les contrôles de sélection multiples dans tous les navigateurs. Je suis d'accord que c'est un peu bancal ou peu intuitif. Vous pouvez toujours trouver des moyens de remplacer ce comportement par défaut si vous le souhaitez . - voir ce violon mis à jour
KyleMit
14

Essayez la sélection multiple , en particulier les éléments multiples . Semble être une solution bien propre et gérée, avec des tonnes d'exemples. Vous pouvez également afficher la source.

<div>
  <div class="form-group row">
    <label class="col-sm-2">
      Basic Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Group Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <optgroup label="Group 1">
          <option value="1">1</option>
          <option value="2">2</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="6">6</option>
          <option value="7">7</option>
        </optgroup>
        <optgroup label="Group 3">
          <option value="11">11</option>
          <option value="12">12</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>

<script>
  $(function() {
    $('select').multipleSelect({
      multiple: true,
      multipleWidth: 60
    })
  })
</script>
Azghanvi
la source
Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien pour référence. Les réponses aux liens uniquement peuvent devenir invalides si la page liée change. - De l'avis
Justin Lessard
8

Je suis parti de la réponse @vitfo mais je veux avoir des entrées à l' <option>intérieur <select>au lieu de cases à cocher, donc j'ai rassemblé toutes les réponses pour faire cela, il y a mon code, j'espère que cela aidera quelqu'un.

$(".multiple_select").mousedown(function(e) {
    if (e.target.tagName == "OPTION") 
    {
      return; //don't close dropdown if i select option
    }
    $(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box
});
$(".multiple_select").on('blur', function(e) {
    $(this).removeClass('multiple_select_active'); //close dropdown if click outside <select>
});
	
$('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple
    e.preventDefault(); 
    $(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click
    $(this).parent().change(); //trigger change event
});

	
	$("#myFilter").on('change', function() {
      var selected = $("#myFilter").val().toString(); //here I get all options and convert to string
      var document_style = document.documentElement.style;
      if(selected !== "")
        document_style.setProperty('--text', "'Selected: "+selected+"'");
      else
        document_style.setProperty('--text', "'Select values'");
	});
:root
{
	--text: "Select values";
}
.multiple_select
{
	height: 18px;
	width: 90%;
	overflow: hidden;
	-webkit-appearance: menulist;
	position: relative;
}
.multiple_select::before
{
	content: var(--text);
	display: block;
  margin-left: 5px;
  margin-bottom: 2px;
}
.multiple_select_active
{
	overflow: visible !important;
}
.multiple_select option
{
	display: none;
    height: 18px;
	background-color: white;
}
.multiple_select_active option
{
	display: block;
}

.multiple_select option::before {
  content: "\2610";
}
.multiple_select option:checked::before {
  content: "\2611";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myFilter" class="multiple_select" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>
Développer l'extrait

Pavelbere
la source
6

Autre version de Vanilla JS avec un clic à l'extérieur pour masquer les cases à cocher:

let expanded = false;
const multiSelect = document.querySelector('.multiselect');

multiSelect.addEventListener('click', function(e) {
  const checkboxes = document.getElementById("checkboxes");
    if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
  e.stopPropagation();
}, true)

document.addEventListener('click', function(e){
  if (expanded) {
    checkboxes.style.display = "none";
    expanded = false;
  }
}, false)

J'utilise addEventListener au lieu de onClick afin de profiter des options de phase de capture / bouillonnement avec stopPropagation (). Vous pouvez en savoir plus sur la capture / bullage ici: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Le reste du code correspond à la réponse originale de vitfo (mais pas besoin de onclick () dans le html). Quelques personnes ont demandé cette fonctionnalité sans jQuery.

Voici l'exemple de codepen https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

davidysoards
la source
2

Vous pouvez utiliser cette bibliothèque sur git à cet effet https://github.com/ehynds/jquery-ui-multiselect-widget

pour lancer la boîte de sélection, utilisez ceci

    $("#selectBoxId").multiselect().multiselectfilter();

et lorsque vous avez les données prêtes dans json (à partir d'ajax ou de n'importe quelle méthode), commencez par analyser les données puis attribuez-leur le tableau js

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");
Jaya Parwani
la source
2

Utilisez ce code pour la liste de cases à cocher dans le menu d'options.

.dropdown-menu input {
   margin-right: 10px;
}   
<div class="btn-group">
    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">
        <li><p><input type="checkbox" value="id1" > OA Number</p></li>
        <li><p><input type="checkbox" value="id2" >Customer</p></li>
        <li><p><input type="checkbox" value="id3" > OA Date</p></li>
        <li><p><input type="checkbox" value="id4" >Product Code</p></li>
        <li><p><input type="checkbox" value="id5" >Name</p></li>
        <li><p><input type="checkbox" value="id6" >WI Number</p></li>
        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>
        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>
        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>
        <li><p><input type="checkbox" value="id10" > Production Date</p></li>
        <button class="btn btn-info" onClick="showTable();">Go</button>
    </ul>
</div>
Développer l'extrait

Rupesh Wankhede
la source
Pour un exemple complet de cette approche de base de la construction d'un dropdown-menuavec des éléments de case à cocher dans chaque ligne, voici une réponse pour mettre des cases à cocher dans une liste déroulante Bootstrap
KyleMit
1

Vous pourriez être en train de charger le fichier multiselect.js avant la mise à jour de la liste d'options avec l'appel AJAX, donc pendant l'exécution du fichier multiselect.js, il y a une liste d'options vide pour appliquer la fonction multiselect. Donc, mettez d'abord à jour la liste d'options par appel AJAX, puis lancez l'appel multisélection, vous obtiendrez la liste déroulante avec la liste d'options dynamique.

Espérons que cela va vous aider.

Liste déroulante Multiselect et fichiers js et css associés

// This function should be called while loading page
var loadParentTaskList = function(){
    $.ajax({
        url: yoururl,
        method: 'POST',
        success: function(data){
            // To add options list coming from AJAX call multiselect
            for (var field in data) {
                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
            }
   
            // To initiate the multiselect call 
            $("#parent_task").multiselect({
                includeSelectAllOption: true
            })
        }
    });
}
// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>
Développer l'extrait

Yaswini Modupalli
la source
1

Vous pouvez essayer Bootstrap-select . Il a aussi une recherche en direct!

saee
la source
0

Si vous souhaitez créer plusieurs listes déroulantes de sélection dans la même page:

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

Html:

 <form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>

</form>

Utilisation de Jquery:

 function showCheckboxes(elethis) {
        if($(elethis).next('#checkboxes').is(':hidden')){
            $(elethis).next('#checkboxes').show();
            $('.selectBox').not(elethis).next('#checkboxes').hide();  
        }else{
            $(elethis).next('#checkboxes').hide();
            $('.selectBox').not(elethis).next('#checkboxes').hide();
        }
 }
Ashish
la source
-2

N'ajoutez que la classe create div et ajoutez le contrôle de formulaire de classe. j'utilise JSP, boostrap4. Ignorez c: foreach.

<div class="multi-select form-control" style="height:107.292px;">
        <div class="checkbox" id="checkbox-expedientes">
            <c:forEach var="item" items="${postulantes}">
                <label class="form-check-label">
                    <input id="options" class="postulantes" type="checkbox" value="1">Option 1</label>
            </c:forEach>
        </div>
    </div>
Juan Silupú Maza
la source