Comment utiliser la case à cocher à L'intérieur de L'Option Select

le client m'a donné une conception qui a un menu D'Option de sélection contenant une case à cocher avec le nom de l'article comme articles individuels dans la liste. Est-il de toute façon possible d'ajouter une case à cocher dans un menu Select Option?

NB: Developer doit ajouter son propre id pour rendre le menu efficace, je n'ai besoin du code CSS HTML que si c'est possible.

64
demandé sur Vadim Ovchinnikov 2013-07-18 08:46:14

7 réponses

vous ne pouvez pas placer de case à cocher dans l'élément select, mais vous pouvez obtenir la même fonctionnalité en utilisant HTML, CSS et JavaScript. Voici une possible solution de travail. L'explication qui 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:

d'abord nous créons un élément select qui affiche le texte "choisir une option", et l'élément vide qui couvre (chevauchements) l'élément select ( <div class="overSelect"> ). Nous ne voulons pas l'utilisateur à cliquer sur l'élément select - il montrerait un vide options. Pour chevaucher l'élément avec d'autres éléments, nous utilisons la propriété CSS position avec valeur relative | absolue.

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

nous créons aussi div qui contient nos cases à cocher et le style en utilisant CSS. La fonction JavaScript mentionnée ci-dessus ne fait que changer la valeur <div id="checkboxes"> de la propriété d'affichage CSS De "none" à "block" 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'informations:

positionnement CSS

comment superposer une div sur une autre div

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

propriété CSS display

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

136
répondu vitfo 2018-03-02 11:47:25

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 le DEMO

42
répondu pmrotule 2018-03-20 07:24:59

Essayer sélection multiple . Semble être beaucoup solution propre et gérée, avec des tonnes d'exemples.

11
répondu Azghanvi 2015-04-11 01:55:48

pour l'approche pur CSS , vous pouvez utiliser le sélecteur :checked combiné avec le sélecteur ::before pour le contenu conditionnel en ligne.

il suffit d'ajouter la classe select-checkbox à votre élément select et d'inclure les feuilles de style en cascade suivantes: 

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

vous pouvez utiliser de vieux caractères unicode (avec un encodage hex échappé ) comme ceci:

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

Screenshot

Démo jsFiddle & Pile Extraits de 

select {
  width: 150px;
}

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

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

Note : attention à la compatibilité IE cependant

5
répondu KyleMit 2018-02-13 21:34:20

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

pour lancer la boîte de sélection utiliser ce 

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

et quand vous avez les données prêtes dans JSON (d'ajax ou n'importe quelle méthode), d'abord analyser les données et puis assigner le tableau js à elle 

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");
1
répondu Jaya Parwani 2018-04-05 05:15:54

utilisez ce code pour la liste des cases à cocher dans le menu option. 

.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
répondu Rupesh 2018-09-26 12:31:57

vous pourriez être en train de charger du multi-select.js file avant la liste d'options mise à jour avec AJAX call so lors de l'exécution de multi-select.fichier js il est vide la liste des options est là pour appliquer multiselect functionlaity. Donc tout d'abord mettre à jour la liste des options par appel AJAX puis lancer l'appel Multi-Select vous obtiendrez la liste déroulante avec la liste des options dynamiques.

espérons que cela vous aidera.

liste déroulante à Sélection multiple et liées js & css fichiers 

// 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
répondu Yaswini Modupalli 2017-01-15 07:41:51