web-dev-qa-db-fra.com

Comment utiliser Checkbox dans Select Option

Le client m'a donné un modèle comportant un menu Sélectionner une option contenant une case à cocher ainsi que le nom de l'élément sous forme d'éléments individuels dans la liste . Est-il possible 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 CSS HTML que si cela est possible.

htmlcsshtml-select
70
Hero Tra

Vous ne pouvez pas cocher la case dans l'élément select mais vous pouvez obtenir les mêmes fonctionnalités en utilisant HTML, CSS et JavaScript. Voici une solution de travail possible. L'explication suit.

enter image description here

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>

Explication:

Tout d'abord, nous créons un élément de sélection qui affiche le texte "Sélectionner 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 sélectionné - cela afficherait des options vides. Pour chevaucher l'élément avec un autre élément, nous utilisons la propriété de position CSS avec la valeur relative | absolu.

Pour ajouter la fonctionnalité, nous spécifions une fonction JavaScript appelée lorsque l'utilisateur clique sur la 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 stylons en utilisant CSS. La fonction JavaScript mentionnée ci-dessus change simplement la valeur <div id="checkboxes"> de la propriété d'affichage CSS de "aucune" à "bloquer" et inversement.

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

Plus d'information:

Positionnement CSS

Comment superposer une div sur une autre

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

Propriété d'affichage CSS

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

142
vitfo

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 démo

46
pmrotule

Essayez Sélection multiple . Semble être une solution beaucoup plus propre et gérée, avec des tonnes d’exemples.

11
Azghanvi

Pour une approche Pure CSS, vous pouvez utiliser le sélecteur :checked combiné avec le sélecteur ::before au contenu conditionnel intégré.

Ajoutez simplement la classe select-checkbox à votre élément select 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 un encodage hexadécimal échappé ) comme ceux-ci:

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

 Screenshot

Démo dans jsFiddle & Stack Snippets

select {
  width: 150px;
}

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

.select-checkbox-fa option::before {
  font-family: FontAwesome;
  content: "\f096";
  width: 1.3em;
  display: inline-block;
  margin-left: 2px;
}
.select-checkbox-fa option:checked::before {
  content: "\f046";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<h3>Unicode</h3>
<select multiple="" class="form-control select-checkbox" size="5">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</select>

<h3>Font Awesome</h3>
<select multiple="" class="form-control select-checkbox-fa" size="5">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</select>

Remarque: Attention cependant aux problèmes de compatibilité IE

9
KyleMit

Utilisez ce code pour la liste des 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>

1
RSW

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

pour lancer la selectbox, utilisez cette

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

et quand 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 assignez le tableau js

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

Autre version de Vanilla JS avec un clic 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 tirer parti des options de phase de capture/bullage avec stopPropagation (). Vous pouvez en savoir plus sur la capture/bouillonnement ici: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

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

Voici un exemple de code https://codepen.io/davidysoards/pen/QXYYYa?editors=101

1
davidysoards

Vous êtes peut-être en train de charger le fichier multiselect.js avant que la liste d'options ne soit mise à jour avec l'appel AJAX. Ainsi, lors de l'exécution du fichier multiselect.js, une liste d'options vide permet d'appliquer la fonction multiselect. Commencez donc par mettre à jour la liste des options par un appel de AJAX, puis lancez l'appel à sélection multiple. Vous obtiendrez la liste déroulante avec la liste des options dynamiques.

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>

0
Yaswini Modupalli

J'ai commencé à partir de @vitfo answer mais je veux avoir <option> dans <select> au lieu d'entrées de case à cocher afin que je rassemble toutes les réponses pour créer ceci, voici 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>
0
pavelbere
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>
0
i hate this