Le client m'a confié une conception qui comporte un menu de sélection d'options contenant une case à cocher ainsi que le nom de l'élément en tant qu'éléments individuels dans la liste. Est-il possible d'ajouter une case à cocher dans un menu Option de sélection ?
NB : Le développeur doit ajouter son propre identifiant pour rendre le menu efficace, je n'ai besoin que du code HTML CSS si c'est possible.
Vous ne pouvez pas placer une case à cocher dans un élément de sélection, mais vous pouvez obtenir la même fonctionnalité en utilisant HTML, CSS et JavaScript. Voici une solution possible. L'explication suit.
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>Nous créons d'abord un élément de sélection qui affiche le texte "Sélectionnez une option", puis un élément vide qui recouvre 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 superposer l'élément avec d'autres éléments, nous utilisons la propriété CSS position avec la valeur relative | absolue.
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 la div qui contient nos cases à cocher et la stylisons à l'aide de CSS. La fonction JavaScript mentionnée ci-dessus change simplement <div id="checkboxes"> la valeur de la propriété CSS display de "none" à "block" et vice versa.
La solution a été testée dans les navigateurs suivants : Internet Explorer 10, Firefox 34, Chrome 39. JavaScript doit être activé dans le navigateur.
Positionnement CSS
Comment superposer une div sur une autre div
http://www.w3schools.com/css/css_positioning.asp
Propriété d'affichage CSS
Le meilleur plugin à ce jour est Bootstrap Multiselect
EDITAR: J'ai écrit ceci il y a très longtemps. Je ne recommande plus l'utilisation de jQuery. Vous devriez plutôt apprendre un framework réactif comme Vue.js, React ou Angular, où vous pouvez choisir parmi de nombreux modules. Je suis sûr que vous trouverez ce dont vous avez besoin. J'ai trouvé celui-ci par exemple à partir d'une recherche rapide sur Google.
<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 une démo :
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#chkveg').val());
});
});
.multiselect-container>li>a>label {
padding: 4px 20px 3px 20px;
}
<link href="https://unpkg.com/bootstrap@3.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.2/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-multiselect@0.9.13/dist/js/bootstrap-multiselect.js"></script>
<link href="https://unpkg.com/bootstrap-multiselect@0.9.13/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<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>
Pour un Pure CSS vous pouvez utiliser l'approche :checked combiné au sélecteur ::before pour intégrer du contenu conditionnel.
Il suffit d'ajouter la classe select-checkbox à votre select et inclure 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 de simples caractères unicode (avec un signe encodage hexagonal échappé ) comme celles-ci :
\2610
\2611
Ou si vous voulez pimenter les choses, vous pouvez utiliser ceux-ci FontAwesome glyphes
.fa-carré-o - \f096
.fa-check-square-o - \f046
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>Note : Attention toutefois aux problèmes de compatibilité avec IE
Essayez sélection multiple notamment articles multiples . Il semble que ce soit une solution très propre et bien gérée, avec des tonnes d'exemples. Vous pouvez également consulter 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>
J'ai commencé par la réponse de @vitfo mais je veux avoir <option> à l'intérieur de <select> J'ai donc rassemblé toutes les réponses pour le faire, voici mon code, j'espère qu'il 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> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
