So verwenden Sie die Checkbox innerhalb Wählen Sie Option

Der Kunde hat mir ein Design gegeben, das ein Auswahlmenü enthält, das ein Kontrollkästchen zusammen mit dem Namen des Artikels als einzelne Elemente in der Liste enthält. Ist es trotzdem möglich, ein Kontrollkästchen in einem Auswahlmenü hinzuzufügen?

NB: Entwickler muss seine eigene ID hinzufügen, um das Menü effektiv zu machen, ich brauche nur den HTML CSS Code, wenn es möglich ist.

   

Sie können keine Kontrollkästchen innerhalb von select-Elementen platzieren, aber Sie können die gleiche functionalität mit HTML, CSS und JavaScript erhalten. Hier ist eine mögliche Arbeitslösung. Die Erklärung folgt.

Bildbeschreibung hier eingeben


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; } 
 

Das beste Plugin ist Bootstrap Multiselect

   jQuery Multi Select Dropdown with Checkboxes        


Hier ist die Demo

Versuchen Sie Mehrfachauswahl . Sieht nach viel sauberer und gemanagter Lösung aus, mit Tonnen von Beispielen.

Für einen reinen CSS- Ansatz können Sie den Selektor :checked zusammen mit dem Selektor ::before um bedingten Inhalt zu verknüpfen.

Fügen Sie einfach das select-checkbox für die class zu Ihrem select Element hinzu und fügen Sie das folgende CSS hinzu:

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

Sie können einfache alte Unicode-Zeichen (mit einer Escape-Hexadezimalcodierung ) wie diese verwenden:

  • ☐ Wahlurne – \2610
  • ☑ Wahlurne mit Scheck – \2611

Oder, wenn Sie Dinge aufpeppen möchten, können Sie diese FontAwesome Glyphen verwenden

  • .fa-Quadrat-o .fa-Quadrat-o – \f096
  • .fa-Check-Platz-o .fa-check-quadrat-o – \f046

Bildschirmfoto

Demo in jsFiddle & Stack Snippets

 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"; } 
  

Unicode

Font Awesome

Verwenden Sie diesen Code für die Checkbox-Liste im Optionsmenü.

  

Sie können diese Bibliothek auf Git für diesen Zweck verwenden https://github.com/ehyds/jquery-ui-multiselect-widget

Verwenden Sie diese Option, um die Selectbox zu initiieren

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

und wenn Sie die Daten in JSON (aus AJAX oder einer anderen Methode) bereit haben, analysieren Sie zuerst die Daten und weisen Sie ihr dann das js-Array zu

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

Möglicherweise laden Sie die multiselect.js-Datei vor der mit AJAX-Aufruf aktualisierten Optionsliste. Während die Ausführung der Datei multiselect.js dort leer ist, gibt es eine Optionsliste zum Anwenden der function multiselect functionlaity. Wenn Sie zuerst die Optionsliste durch den AJAX-Aufruf aktualisieren und dann den Mehrfachauswahlaufruf einleiten, erhalten Sie die Dropdown-Liste mit der dynamischen Optionsliste.

Hoffe, das wird dir helfen.

Multiselect-Dropdown-Liste und zugehörige js & css-Dateien

 // 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) { $('').appendTo('#parent_task'); } // To initiate the multiselect call $("#parent_task").multiselect({ includeSelectAllOption: true }) } }); } 
 // Multiselect drop down list with id parent_task