Selezionare la casella di riepilogo a discesa Bootstrap

Sto cercando di personalizzare un menu a discesa di avvio con le caselle di controllo e se seleziono una casella di controllo dal menu a discesa, il nome dell’etichetta voglio essere scritto nel menu a discesa di input delimitato da ‘ ; ‘come nell’immagine caricata quando il dropdown è chiuso.

Ecco un esempio di violino .

inserisci la descrizione dell'immagine qui

Non è la soluzione più elegante – probabilmente vorrai perfezionarla in qualche modo, ma questo potrebbe farti iniziare:

 $(document).ready(function() { $("ul.dropdown-menu input[type=checkbox]").each(function() { $(this).change(function() { var line = ""; $("ul.dropdown-menu input[type=checkbox]").each(function() { if($(this).is(":checked")) { line += $("+ span", this).text() + ";"; } }); $("input.form-control").val(line); }); }); }); 

So che è una vecchia domanda ma, comunque, puoi usare questa libreria per fare quasi (eccetto il disegno esatto che hai chiesto) cosa vuoi http://davidstutz.github.io/bootstrap-multiselect/#getting-started

Il seguente codice funziona in Bootstrap 4.1 se si aggiunge una funzione per mostrare il menu al passaggio del mouse, ma quando si fa clic su

  • , le caselle di controllo diventano non modificabili. Chiunque abbia una soluzione migliore, per favore, fornisci.
  •   

    E aggiungi questi codici JS:

     // Allow Bootstrap dropdown menus to have forms/checkboxes inside, // and when clicking on a dropdown item, the menu doesn't disappear. $(document).on('click', '.dropdown-menu.dropdown-menu-form', function(e) { e.stopPropagation(); });