it-swarm.com.de

So verwenden Sie das Kontrollkästchen in Select Option

Der Kunde hat mir ein Design gegeben, das ein Select-Options-Menü enthält, das ein Ankreuzfeld zusammen mit dem Elementnamen als einzelne Elemente in der Liste enthält. Gibt es überhaupt die Möglichkeit, ein Checkbox innerhalb eines Select-Options-Menüs hinzuzufügen?

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

70
Hero Tra

Sie können kein Ankreuzfeld in einem select-Element platzieren, aber Sie können dieselbe Funktionalität verwenden, indem Sie HTML, CSS und JavaScript verwenden. Hier ist eine mögliche Arbeitslösung. Die Erklärung folgt.

enter image description here


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>

Erläuterung:

Zuerst erstellen wir ein select-Element, das den Text "Select eine Option" anzeigt, und ein leeres Element, das das select-Element (<div class="overSelect">) überdeckt (überlappt). Wir möchten nicht, dass der Benutzer auf das select-Element klickt - es würden leere Optionen angezeigt. Um das Element mit einem anderen Element zu überlappen, verwenden wir die CSS-Positionseigenschaft mit dem Wert relativ 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 ein div, das unsere Checkboxen enthält, und gestalten es mit CSS. Die oben genannte 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 überlagert

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

CSS-Anzeigeeigenschaft

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

142
vitfo

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

46
pmrotule

Mehrfachauswahl . Es scheint eine sehr saubere und verwaltete Lösung mit vielen Beispielen zu sein.

11
Azghanvi

Für einen Pure-CSS-Ansatz können Sie den Selector :checked mit dem Selector ::before kombinieren, um bedingten Inhalt zu integrieren.

Fügen Sie einfach die Klasse select-checkbox 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 mit Escapezeichen versehene Hex-Codierung ) wie folgt verwenden:

Oder, wenn Sie etwas aufpeppen möchten, können Sie diese FontAwesome Glyphs verwenden

 Screenshot

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";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<h3>Unicode</h3>
<select multiple="" class="form-control select-checkbox" size="5">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</select>

<h3>Font Awesome</h3>
<select multiple="" class="form-control select-checkbox-fa" size="5">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</select>

Note: Vorsicht bei Kompatibilitätsproblemen von IE jedoch

9
KyleMit

Verwenden Sie diesen Code für die Liste der Kontrollkästchen 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>

1
RSW

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

verwenden Sie diese Option, um die Selectbox zu starten

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

und wenn Sie die Daten in Json (von Ajax oder einer beliebigen Methode) bereit haben, müssen Sie die Daten zuerst analysieren und dann das Js-Array zuweisen

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

Alternative Vanilla JS-Version mit einem Klick nach außen, um die 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 Capture-/Bubbling-Phase 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 Klick () im HTML-Code erforderlich). Einige Personen haben diese Funktionalität ohne jQuery angefordert.

Hier ist ein Codepen-Beispiel https://codepen.io/davidysoards/pen/QXYYYa?editors=101

1
davidysoards

Möglicherweise laden Sie die Datei multiselect.js, bevor die Optionsliste mit dem Aufruf von AJAX aktualisiert wird. Während der Ausführung der Datei multiselect.js gibt es eine leere Optionsliste. Aktualisieren Sie zuerst die Optionsliste mit dem Aufruf von AJAX, und initiieren Sie den Mehrfachauswahl-Aufruf. Sie erhalten die Dropdown-Liste mit der Liste der dynamischen Optionen.

Hoffe, das wird dir helfen.

Multiselect Dropdown-Liste und verwandte 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) {
                $('<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>

0

Ich habe mit @vitfo answer begonnen, möchte aber <option> in <select> anstelle von Checkbox-Eingaben haben, also füge ich alle Antworten zusammen, um dies zu erreichen. Es gibt meinen Code. Ich hoffe, es wird jemandem 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>
0
pavelbere
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>
0
i hate this