Mehrfachauswahl treffen, um die Höhe an die Optionen ohne Bildlaufleiste anzupassen

Anscheinend funktioniert das nicht:

   select[multiple]{
     height: 100%;
   }

Dadurch hat die Auswahl eine Seitenhöhe von 100% ...

auto funktioniert auch nicht, ich bekomme immer noch die vertikale Bildlaufleiste.

Irgendwelche anderen Ideen?

Ich denke, Sie können das sizeAttribut verwenden. Es funktioniert in allen aktuellen Browsern.

<select name="courses" multiple="multiple" size="30" style="height: 100%;">

Sie können dies mithilfe des sizeAttributs im selectTag tun . Angenommen, Sie haben 8 Optionen, dann würden Sie es wie folgt tun:

<select name='courses' multiple="multiple" size='8'>

Alt, aber dies wird das tun, wonach Sie suchen, ohne dass Sie Fragen stellen müssen. Durch den versteckten Überlauf wird die Bildlaufleiste entfernt, und das Javascript hat die richtige Größe.

<select multiple='multiple' id='select' style='overflow:hidden'>
<option value='foo'>foo</option>
<option value='bar'>bar</option>
<option value='abc'>abc</option>
<option value='def'>def</option>
<option value='xyz'>xyz</option>
</select>

Und nur eine winzige Menge Javascript

var select = document.getElementById('select');
select.size = select.length;

Für jQuery können Sie dies versuchen. Ich mache immer folgendes und es funktioniert.

$(function () {
   $("#multiSelect").attr("size",$("#multiSelect option").length);
});

Sie können dies nur in Javascript / JQuery tun. Sie können dies mit der folgenden JQuery tun (vorausgesetzt, Sie haben Ihrer Auswahl eine ID für Mehrfachauswahl gegeben):

$(function () {
    $("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});

Demo: http://jsfiddle.net/AZEFU/

Ich weiß, dass die Frage alt ist, aber wie das Thema nicht geschlossen ist, werde ich meine Hilfe geben.

Das Attribut "Größe" löst Ihr Problem.

Beispiel:

<select name="courses" multiple="multiple" size="30">

selectkönnte enthalten, optgroupwas jeweils eine Zeile dauert:

<select id="list">
  <optgroup label="Group 1">
    <option value="1">1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="2">2</option>
    <option value="3">3</option>
  </optgroup>
</select>
<script>
  const l = document.getElementById("list")
  l.setAttribute("size", l.childElementCount + l.length)
</script>

In diesem Beispiel insgesamt sizeist (1+1)+(1+2)=5.

Sie können dies mit einfachem Javascript tun ...

<select multiple="multiple" size="return this.length();">

... oder die Höhe bis zur Anzahl der Datensätze begrenzen ...

<select multiple="multiple" size="return this.length() > 10 ? this.length(): 10;">

Fügen Sie zum Entfernen der Bildlaufleiste das folgende CSS hinzu:

select[multiple] {
    overflow-y: auto;
}

Hier ist ein Ausschnitt:

select[multiple] {
  overflow-y: auto;
}

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select multiple size="3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Mit Hilfe der Größe Attribut ist die praktischste Lösung, aber es gibt Macken , wenn sie angewendet wird , wählen Sie mit den Elementen nur zwei oder drei Optionen.

• Wenn Sie den Größenattributwert auf "0" oder "1" setzen, wird meistens ein Standardauswahlelement (Dropdown) gerendert.
• Wenn Sie das Größenattribut auf einen Wert größer als "1" setzen, wird meistens eine Auswahlliste mit einer Höhe gerendert, in der mindestens vier Elemente angezeigt werden können. Dies gilt auch für Listen mit nur zwei oder drei Elementen, was zu unbeabsichtigten Leerzeichen führt.

Einfache JavaScript kann das eingestellt wird Größe Attribut auf den korrekten Wert automatisch, siehe zB diese Geige .

$(function() {
    $("#autoheight").attr("size", parseInt($("#autoheight option").length)); 
});

Wie oben erwähnt, löst diese Lösung das Problem nicht, wenn nur zwei oder drei Optionen vorhanden sind.

Freunde: Wenn Sie die Daten aus einer Datenbank abrufen, können Sie diese $ registers = * _num_rows (Result_query) dann aufrufen

<select size=<?=$registers + 1; ?>"> 

Ich hatte diese Anforderung kürzlich und habe andere Beiträge aus dieser Frage verwendet, um dieses Skript zu erstellen:

$("select[multiple]").each(function() {
  $(this).css("height","100%")
    .attr("size",this.length);
})

Verwenden Sie jQuery, um die Größe (Höhe) aller Mehrfachauswahlmöglichkeiten an die Anzahl der Optionen anzupassen:

$('select[multiple = multiple]').each(function() {
    $(this).attr('size', $(this).find('option').length)
})

Die Art und Weise, wie ein Auswahlfeld gerendert wird, wird vom Browser selbst festgelegt. Jeder Browser zeigt Ihnen also die Höhe des Optionslistenfelds in einer anderen Höhe an. Das kann man nicht beeinflussen. Die einzige Möglichkeit, dies zu ändern, besteht darin, eine eigene Auswahl von Grund auf zu treffen.

Hier ist ein Beispiel für die Verwendung eines Pakets, das in der Laravel-Community sehr beliebt ist:

{!! Form::select('subdomains[]', $subdomains, null, [
    'id' => 'subdomains',
    'multiple' => true,
    'size' => $subdomains->count(),
    'class' => 'col-12 col-md-4 form-control '.($errors->has('subdomains') ? 'is-invalid' : ''),
]) !!}

Paket: https://laravelcollective.com/