Javascript Girl
  1. Javascript Girl
  3. Comment créer une case à cocher dans la liste déroulante à l'intérieur?
Intereting Posts
Pousser la valeur d'entrée sur le tableau dans le stockage local ne va pas Cochez les cases à cocher en fonction des valeurs dans une matrice Comprendre les fonctions du nombre en JavaScript Passant js object comme json à jquery? Comment créer une table de l'arbre en effondrement dans html / css / js? Comment définir un champ En-tête sur POST un formulaire? Différence entre déclaration et fonction Accéder à une fenêtre par nom de fenêtre Infinite scroll et will_paginate ajoutant la 'page suivante' des éléments plusieurs fois Javascript audio onload Quels sont les meilleurs sites de référence pour la programmation HTML et JavaScript Les coordonnées de Canvas en Fabric.js ont un décalage Paramètres de fonction de fermeture de Javascript? Pourquoi ma jointure sur un réseau JavaScript échoue? D3 utilisant une échelle X différente et un domaine d'échelle Y pour chaque sélection

Comment créer une case à cocher dans la liste déroulante à l'intérieur?

Je veux créer une liste de liste de sélection multiple. En fait, je dois sélectionner plus d'une option en utilisant un menu déroulant. Quand je fais simplement ceci comme montré ci-dessous: 

<select> <option><input type="checkbox"></option> </select>

Ensuite, la case à cocher s'affiche devant le champ déroulant. Mais je veux le créer pour chaque option non pas dans l'ensemble afin que je puisse sélectionner plus que l'option. Est-ce qu'il y a un moyen de faire ça?

Voici une simple liste déroulante

Css 

 .dropdown-check-list { display: inline-block; } .dropdown-check-list .anchor { position: relative; cursor: pointer; display: inline-block; padding: 5px 50px 5px 10px; border: 1px solid #ccc; } .dropdown-check-list .anchor:after { position: absolute; content: ""; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .dropdown-check-list .anchor:active:after { right: 8px; top: 21%; } .dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 1px solid #ccc; border-top: none; } .dropdown-check-list ul.items li { list-style: none; } .dropdown-check-list.visible .anchor { color: #0094ff; } .dropdown-check-list.visible .items { display: block; }

// Marquage et script 

 <body> <div id="list1" class="dropdown-check-list" tabindex="100"> <span class="anchor">Select Fruits</span> <ul class="items"> <li><input type="checkbox" />Apple </li> <li><input type="checkbox" />Orange</li> <li><input type="checkbox" />Grapes </li> <li><input type="checkbox" />Berry </li> <li><input type="checkbox" />Mango </li> <li><input type="checkbox" />Banana </li> <li><input type="checkbox" />Tomato</li> </ul> </div> <script type="text/javascript"> var checkList = document.getElementById('list1'); checkList.getElementsByClassName('anchor')[0].onclick = function (evt) { if (checkList.classList.contains('visible')) checkList.classList.remove('visible'); else checkList.classList.add('visible'); } checkList.onblur = function(evt) { checkList.classList.remove('visible'); } </script> </body>

Cela ne peut pas être fait en seulement HTML (avec des éléments de formulaire dans les éléments d' option ). Il y a un bon widget jQuery qui permet d'obtenir l'effet désiré que vous pouvez trouver ici .

Ou vous pouvez simplement utiliser un champ select multiple standard. 

 <select multiple> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select>

Vous pouvez toujours utiliser l'option multiple ou multiple = "true" avec une étiquette de sélection, mais il existe un plugin jquery qui la rend plus belle. Il est appelé choisi et peut être trouvé ici .

Cet exemple de violon peut vous aider à démarrer

Je vous remercie.

Déboutages multiples avec cases à cocher et jQuery. 

 <div id="list3" class="dropdown-check-list" tabindex="100"> <span class="anchor">Which development(s) are you interested in?</span> <ul class="items"> <li><input id="answers_2529_the-lawns" name="answers[2529][answers][]" type="checkbox" value="The Lawns"/><label for="answers_2529_the-lawns">The Lawns</label></li> <li><input id="answers_2529_the-residence" name="answers[2529][answers][]" type="checkbox" value="The Residence"/><label for="answers_2529_the-residence">The Residence</label></li> </ul> </div> <style> .dropdown-check-list{ display: inline-block; width: 100%; } .dropdown-check-list:focus{ outline:0; } .dropdown-check-list .anchor { width: 98%; position: relative; cursor: pointer; display: inline-block; padding-top:5px; padding-left:5px; padding-bottom:5px; border:1px #ccc solid; } .dropdown-check-list .anchor:after { position: absolute; content: ""; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .dropdown-check-list .anchor:active:after { right: 8px; top: 21%; } .dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 1px solid #ccc; border-top: none; } .dropdown-check-list ul.items li { list-style: none; } .dropdown-check-list.visible .anchor { color: #0094ff; } .dropdown-check-list.visible .items { display: block; } </style> <script> jQuery(function ($) { var checkList = $('.dropdown-check-list'); checkList.on('click', 'span.anchor', function(event){ var element = $(this).parent(); if ( element.hasClass('visible') ) { element.removeClass('visible'); } else { element.addClass('visible'); } }); }); </script>