Come utilizzare la casella di controllo all'interno di Seleziona opzione

94

Il cliente mi ha fornito un design che ha un menu Seleziona opzione contenente una casella di controllo insieme al nome dell'elemento come singoli elementi nell'elenco. È comunque possibile aggiungere una casella di controllo all'interno di un menu Seleziona opzione?

NB: lo sviluppatore deve aggiungere il proprio id per rendere il menu efficace, ho solo bisogno del codice HTML CSS se è possibile.

javascript  html  css  html-select 
— Hero Tra
fonte
5
"Ho bisogno del codice HTML CSS solo se è possibile comunque" ... sì, è possibile ... dovrai solo codificarlo da solo o google
— fmodos
5
@fmodos Possible? Vi preghiamo di lanciare una demo, e OP - controllare questo out ... Non è possibile con i CSS e solo HTML
— Mr. Alien
Si prega di leggere questo post 1stwebdesigns.com/blog/development/…
— kuldeep raj
@ Mr.Alien mi manca capito ... pensavo stesse chiedendo un componente che "potesse" essere HTML CSS e non "doveva" essere solo "HTML CSS" ... il mio cattivo: /
— fmodos

Risposte:

188

Non è possibile inserire la casella di controllo all'interno dell'elemento select ma è possibile ottenere la stessa funzionalità utilizzando HTML, CSS e JavaScript. Ecco una possibile soluzione di lavoro. Segue la spiegazione.

inserisci qui la descrizione dell'immagine

Codice:

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>
Espandi lo snippet

Spiegazione:

All'inizio creiamo un elemento di selezione che mostra il testo "Seleziona un'opzione" e un elemento vuoto che copre (si sovrappone) l'elemento di selezione ( <div class="overSelect">). Non vogliamo che l'utente faccia clic sull'elemento di selezione - mostrerebbe un'opzione vuota. Per sovrapporre l'elemento con un altro elemento usiamo la proprietà position CSS con valore relativo | assoluto.

Per aggiungere la funzionalità specifichiamo una funzione JavaScript che viene chiamata quando l'utente fa clic sul div che contiene il nostro elemento select ( <div class="selectBox" onclick="showCheckboxes()">).

Creiamo anche un div che contiene le nostre caselle di controllo e lo stile utilizzando CSS. La funzione JavaScript sopra menzionata cambia semplicemente il <div id="checkboxes">valore della proprietà di visualizzazione CSS da "nessuno" a "blocco" e viceversa.

La soluzione è stata testata nei seguenti browser: Internet Explorer 10, Firefox 34, Chrome 39. Il browser deve avere JavaScript abilitato.

Maggiori informazioni:

Posizionamento CSS

Come sovrapporre un div su un altro div

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

Proprietà di visualizzazione CSS

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

— vitfo
fonte
1
FYI: Questa soluzione richiederà uno sforzo maggiore se è necessario modificare più di un elenco di selezione. Suggerisco di utilizzare un plugin mantenuto attivamente.
come ottenere il valore delle caselle di controllo selezionate? Risposta molto buona ma sarebbe molto utile se fornissi plnkr o qualcosa del genere.
— Pardeep Jain
7
anche per selezionare la casella non scompare quando l'utente seleziona qualsiasi opzione
— Pardeep Jain
1
Questa risposta è ottima e ha funzionato per me. C'è tuttavia un miglioramento che ho fatto su di esso. Invece del overselectdiv che potrebbe potenzialmente causare alcuni problemi in un'interfaccia complessa che ho usato <option selected hidden>Select an option</option>. Potrebbe non essere il miglior uso di hiddenma funziona.
— Syknapse
2
ma come nascondere il menu a discesa, quando si fa clic all'esterno?
— saurabh kumar
58

Il miglior plugin finora è 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>

Ecco 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>
Espandi lo snippet

— pmrotule
fonte
1
Non è necessario utilizzare queste molte librerie per la propria soluzione. Puoi semplicemente usare la normale opzione di selezione multipla HTML. Grazie!
— Power Star
3
So di poter utilizzare l'opzione di selezione multipla HTML, ma l'ho trovata brutta e non facile da usare.
— pmrotule
4
Mi piace il comportamento di questo plugin, ma voglio usarlo senza bootstrap ... qualcosa di simile?
— singpolyma
questo plugin è così difettoso ... hanno 150 problemi aperti e il manutentore ha detto che non ha tempo. quindi, dopo alcuni problemi, sono passato alla risposta accettata e alla visualizzazione
— Oleg Abrazhaev
1
@Erbureth I percorsi dello script / foglio di stile esterni erano obsoleti nella demo (collegamenti morti). Ho aggiornato gli URL per risolverlo.
— pmrotule
18

Per un approccio Pure CSS , puoi utilizzare il :checkedselettore combinato con il::before selettore per incorporare il contenuto condizionale.

Basta aggiungere la classe select-checkboxal tuo selectelemento e includere il seguente CSS:

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

Puoi usare semplici vecchi caratteri Unicode (con una codifica esadecimale con escape ) come questi:

Oppure, se vuoi ravvivare le cose, puoi usare questi glifi FontAwesome

Immagine dello schermo

Demo in jsFiddle & Stack Snippets

Mostra snippet di codice

Nota : attenzione ai problemi di compatibilità con IE

— KyleMit
fonte
1
È un problema quando l' multipleattributo fa <select>sembrare una casella anziché un menu a discesa ...
— vsync
@vsync, puoi approfondire quale problema stai riscontrando, magari anche fare il fork del violino e includere uno screenshot. L'obiettivo qui è applicare a un <select multiple>elemento, quindi dovrebbe essere il caso d'uso previsto. I selettori CSS dovrebbero essere specifici per applicare quella classe, quindi decidi di usarli sui singoli elementi applicando la .select-checkboxclasse
— KyleMit
1
Consiglio vivamente questa elegante soluzione se stai cercando un approccio CSS puro.
— Anish Sana
@KyleMit Bella soluzione !!! ma il problema è che se voglio selezionare più elementi, devo usare il pulsante Ctrl come il semplice elemento di selezione.
— Lalit Rajput
@LalitRajput, certo, che l'Interaction Design predefinito per tutti i controlli di selezione multipli in tutti i browser. Sono d'accordo sul fatto che sia un po 'instabile o poco intuitivo. Puoi sempre trovare modi per sovrascrivere quel comportamento predefinito se lo desideri Come evitare la necessità di fare clic con il tasto Ctrl in una casella di selezione multipla utilizzando Javascript? - guarda questo violino aggiornato
— KyleMit
14

Prova la selezione multipla , in particolare più elementi . Sembra essere una soluzione molto pulita e gestita, con tonnellate di esempi. Puoi anche visualizzare la fonte.

<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
fonte
Sebbene questo collegamento possa rispondere alla domanda, è meglio includere le parti essenziali della risposta qui e fornire il collegamento come riferimento. Le risposte di solo collegamento possono diventare non valide se la pagina collegata cambia. - Dalla recensione
— Justin Lessard
8

Ho iniziato dalla risposta di @vitfo ma voglio avere <option>dentro <select>invece degli input della casella di controllo, quindi ho messo insieme tutte le risposte per farlo, c'è il mio codice, spero che possa aiutare qualcuno.

$(".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>
Espandi lo snippet

— pavelbere
fonte
6

Versione alternativa di Vanilla JS con clic all'esterno per nascondere le caselle di controllo:

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)

Sto usando addEventListener invece di onClick per sfruttare le opzioni della fase di cattura / bubbling insieme a stopPropagation (). Puoi leggere ulteriori informazioni sull'acquisizione / sul bubbling qui: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Il resto del codice corrisponde alla risposta originale di vitfo (ma non c'è bisogno di onclick () nell'html). Un paio di persone hanno richiesto questa funzionalità senza jQuery.

Ecco un esempio di codepen https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

— davidysoards
fonte
2

Puoi utilizzare questa libreria su git per questo scopo https://github.com/ehynds/jquery-ui-multiselect-widget

per avviare la casella di selezione utilizzare questo

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

e quando hai i dati pronti in json (da ajax o qualsiasi metodo), prima analizza i dati e poi assegna l'array js ad esso

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

Utilizzare questo codice per l'elenco delle caselle di controllo nel menu delle opzioni.

.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>
Espandi lo snippet

— Rupesh Wankhede
fonte
Per un esempio completo di questo approccio di base della creazione di una dropdown-menucasella di controllo con elementi in ogni riga, ecco una risposta per inserire le caselle di controllo in un menu a discesa Bootstrap
— KyleMit
1

Potresti caricare il file multiselect.js prima che l'elenco delle opzioni venga aggiornato con la chiamata AJAX, quindi durante l'esecuzione del file multiselect.js è presente un elenco di opzioni vuoto per applicare la funzionalità di selezione multipla. Quindi prima aggiorna l'elenco delle opzioni tramite la chiamata AJAX, quindi avvia la chiamata multiselezione, otterrai l'elenco a discesa con l'elenco delle opzioni dinamico.

Spero che questo ti possa aiutare.

Elenco a discesa multiselect e js correlati e file CSS

// 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>
Espandi lo snippet

— Yaswini Modupalli
fonte
0

Se desideri creare più menu a discesa di selezione nella stessa pagina:

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

Utilizzando 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
fonte
-2

Aggiungi solo class create div e aggiungi class form-control. iam usa JSP, boostrap4. Ignora 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
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.