Verwendung des Kontrollkästchens in Auswahloption

94

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

NB: Der Entwickler muss seine eigene ID hinzufügen, damit das Menü effektiv wird. Ich benötige den HTML-CSS-Code nur, wenn dies möglich ist.

javascript html css html-select Held Tra
quelle
5
"Ich brauche den HTML-CSS-Code nur, wenn es sowieso möglich ist" ... ja, es ist möglich ... Sie müssen ihn nur selbst codieren oder googeln
fmodos
5
@fmodos Möglich? Bitte werfen Sie uns eine Demo, und OP - überprüfen Sie diese heraus ... Es ist nicht möglich mit CSS und HTML nur
Mr. Alien
Bitte lesen Sie diesen Beitrag 1stwebdesigns.com/blog/development/…
Kuldeep Raj
@ Mr.Alien Ich vermisse verstanden ... Ich dachte, er würde nach einer Komponente fragen, die "HTML CSS" sein könnte und nicht "nur" HTML CSS "sein muss ... mein schlechtes: /
fmodos

Antworten:

188

Sie können das Kontrollkästchen nicht in das Auswahlelement einfügen, aber Sie können dieselbe Funktionalität mithilfe von HTML, CSS und JavaScript erhalten. Hier ist eine mögliche Arbeitslösung. Die Erklärung folgt.

Geben Sie hier die Bildbeschreibung ein

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;
}
<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>
Erweitern Sie das Snippet

Erläuterung:

Zuerst erstellen wir ein Auswahlelement, das den Text "Option auswählen" anzeigt, und ein leeres Element, das das Auswahlelement abdeckt (überlappt) ( <div class="overSelect">). Wir möchten nicht, dass der Benutzer auf das Auswahlelement klickt - es werden leere Optionen angezeigt. Um das Element mit einem anderen Element zu überlappen, verwenden wir die CSS-Positionseigenschaft mit dem Wert relative | absolut.

Um die Funktionalität hinzuzufügen, geben wir eine JavaScript-Funktion an, die aufgerufen wird, wenn der Benutzer auf das div klickt, das unser select-Element ( <div class="selectBox" onclick="showCheckboxes()">) enthält.

Wir erstellen auch div, das unsere Kontrollkästchen enthält, und formatieren es mit CSS. Die oben erwähnte JavaScript-Funktion ändert lediglich den <div id="checkboxes">Wert der CSS-Anzeigeeigenschaft von "none" in "block" und umgekehrt.

Die Lösung wurde in den folgenden Browsern getestet: Internet Explorer 10, Firefox 34, Chrome 39. Für den Browser muss JavaScript aktiviert sein.

Mehr Informationen:

CSS-Positionierung

Wie man ein Div über ein anderes Div legt

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

CSS-Anzeigeeigenschaft

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

vitfo
quelle
1
Zu Ihrer Information: Diese Lösung erfordert mehr Aufwand, wenn mehr als eine Auswahlliste geändert werden muss. Ich schlage vor, ein aktiv gewartetes Plugin zu verwenden.
Wie erhalte ich den Wert ausgewählter Kontrollkästchen? Sehr gute Antwort, aber es wäre sehr hilfreich, wenn Sie plnkr oder ähnliches bereitstellen.
Pardeep Jain
7
Auch das Auswahlfeld wird nicht
ausgeblendet,
1
Diese Antwort ist großartig und hat bei mir funktioniert. Es gibt jedoch eine Verbesserung, die ich daran vorgenommen habe. Anstelle des overselectdiv, das möglicherweise Probleme in einer komplexen Schnittstelle verursachen könnte, die ich verwendet habe <option selected hidden>Select an option</option>. Es ist vielleicht nicht die beste Verwendung, hiddenaber es funktioniert.
Syknapse
2
aber wie kann man das Dropdown ausblenden, wenn wir nach draußen klicken?
Saurabh Kumar
57

Das bisher beste Plugin ist 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>

Hier ist die 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>
Erweitern Sie das Snippet

pmrotule
quelle
1
Sie müssen nicht so viele Bibliotheken für Ihre Lösung verwenden. Sie können einfach die reguläre HTML-Mehrfachauswahloption verwenden. Vielen Dank!
Power Star
3
Ich weiß, dass ich die HTML-Mehrfachauswahloption verwenden kann, fand sie jedoch hässlich und nicht benutzerfreundlich.
pmrotule
4
Ich mag das Verhalten dieses Plugins, möchte es aber ohne Bootstrap verwenden ... etwas Ähnliches?
Singpolym
Dieses Plugin ist so fehlerhaft ... sie haben 150 offene Probleme und der Betreuer sagte, dass er keine Zeit hat.
Also
1
@Erbureth Die externen Skript- / Stylesheet-Pfade waren in der Demo veraltet (tote Links). Ich habe die URLs aktualisiert, um das Problem zu beheben.
pmrotule
18

Für einen Pure CSS- Ansatz können Sie den :checkedSelektor in Kombination mit dem ::beforeSelektor verwenden, um bedingten Inhalt zu integrieren.

Fügen Sie einfach die Klasse select-checkboxzu Ihrem selectElement 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 maskierten Hex-Codierung ) wie folgt verwenden:

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

Bildschirmfoto

Demo in jsFiddle & Stack Snippets

Code-Snippet anzeigen

Hinweis : Beachten Sie jedoch die Probleme mit der IE-Kompatibilität

KyleMit
quelle
1
Es ist ein Problem, wenn das multipleAttribut das <select>Aussehen wie eine Box anstelle eines Dropdowns macht ...
vsync
@vsync, können Sie näher erläutern, welches Problem Sie haben, vielleicht sogar die Geige abspalten und einen Screenshot hinzufügen? Das Ziel hier ist es, auf ein <select multiple>Element anzuwenden , so dass dies der beabsichtigte Anwendungsfall sein sollte. Die CSS-Selektoren sollten spezifisch für die Anwendung dieser Klasse sein, damit Sie sich für die Verwendung auf einzelne Elemente entscheiden, indem Sie die .select-checkboxKlasse anwenden
KyleMit
1
Empfehlen Sie diese elegante Lösung sehr, wenn Sie nach einem reinen CSS-Ansatz suchen.
Anish Sana
@ KyleMit Schöne Lösung !!! Aber das Problem ist, wenn ich mehrere Elemente auswählen möchte, muss ich die Strg-Taste wie das einfache Auswahlelement verwenden.
Lalit Rajput
@LalitRajput, sicher, dass das Standard-Interaktionsdesign für alle Mehrfachauswahl-Steuerelemente in allen Browsern gilt. Ich bin damit einverstanden, dass es irgendwie wackelig oder nicht intuitiv ist. Sie können immer Möglichkeiten finden, um dieses Standardverhalten zu überschreiben, wenn Sie möchten. Wie vermeide ich die Notwendigkeit eines Strg-Klicks in einem Mehrfachauswahlfeld mit Javascript? - sehen Sie diese aktualisierte Geige
KyleMit
13

Versuchen Sie es mit Mehrfachauswahl . Es scheint eine sehr saubere und verwaltete Lösung mit unzähligen Beispielen zu sein.

Azghanvi
quelle
8

Ich aus @vitfo Antwort gestartet , aber ich möchte haben <option>innen <select>statt Checkbox Eingänge , so dass ich alle zusammen setzen die Antworten , dies zu machen, da mein Code, ich hoffe , es jemand helfen.

$(".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>
Erweitern Sie das Snippet

pavelbere
quelle
5

Alternative Vanilla JS-Version mit Klick nach außen, um Kontrollkästchen auszublenden:

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)

Ich verwende addEventListener anstelle von onClick, um die Optionen für die Erfassungs- / Blasenphase zusammen mit stopPropagation () zu nutzen. Weitere Informationen zum Capture / Bubbling finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Der Rest des Codes stimmt mit der ursprünglichen Antwort von vitfo überein (es ist jedoch kein onclick () im HTML erforderlich). Einige Leute haben diese Funktionalität ohne jQuery angefordert.

Hier ist ein Beispiel für einen Codepen: https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

Davidysoards
quelle
2

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

Verwenden Sie diese Option, um die Auswahlbox zu starten

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

und wenn Sie die Daten in json bereit haben (von Ajax oder einer anderen Methode), 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");
Jaya Parwani
quelle
2

Verwenden Sie diesen Code für die Kontrollkästchenliste im Optionsmenü.

.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>
Erweitern Sie das Snippet

Rupesh Wankhede
quelle
Ein ausführliches Beispiel für diesen grundlegenden Ansatz zum Erstellen eines dropdown-menuKontrollkästchens mit Kontrollkästchenelementen in jeder Zeile finden Sie hier eine Antwort für das Einfügen von Kontrollkästchen in eine Bootstrap-Dropdown-Liste
KyleMit
1

Möglicherweise laden Sie die Datei multiselect.js, bevor die Optionsliste mit dem AJAX-Aufruf aktualisiert wird. Während der Ausführung der Datei multiselect.js ist also eine leere Optionsliste vorhanden, um die Multiselect-Funktion anzuwenden. Aktualisieren Sie also zuerst die Optionsliste per AJAX-Aufruf und starten Sie dann den Mehrfachauswahl-Aufruf. Sie erhalten die Dropdown-Liste mit der dynamischen Optionsliste.

Hoffe das wird dir helfen.

Multiselect-Dropdown-Liste und zugehörige JS- und 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) {
                $('<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>
Erweitern Sie das Snippet

Yaswini Modupalli
quelle
1

Sie können Bootstrap-select ausprobieren . Es hat auch eine Live-Suche!

saee
quelle
0

Wenn Sie mehrere ausgewählte Dropdowns auf derselben Seite erstellen möchten:

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

Verwenden von 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
quelle
-2

Fügen Sie nur class create div und add class form-control hinzu. Ich benutze JSP, boostrap4. Ignoriere 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
quelle