Dokonaj wielokrotnego wyboru, aby dostosować wysokość i dopasować opcje bez paska przewijania

Najwyraźniej to nie działa:

   select[multiple]{
     height: 100%;
   }

sprawia, że ​​zaznaczenie ma 100% wysokości strony ...

auto też nie działa, nadal pojawia się pionowy pasek przewijania.

Jakieś inne pomysły?

Myślę, że możesz użyć sizeatrybutu. Działa we wszystkich najnowszych przeglądarkach.

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

Możesz to zrobić za pomocą sizeatrybutu w selecttagu. Przypuśćmy, że masz 8 opcji, to zrobiłbyś to tak:

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

Stary, ale to zrobi to, czego szukasz, bez potrzeby korzystania z jquery. Ukryte przepełnienie usuwa pasek przewijania, a javascript nadaje mu odpowiedni rozmiar.

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

I tylko niewielka ilość javascript

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

W przypadku jQuery możesz tego spróbować. Zawsze wykonuję następujące czynności i to działa.

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

Możesz to zrobić tylko w Javascript / JQuery, możesz to zrobić za pomocą następującego JQuery (zakładając, że podałeś wybranemu identyfikator multiselect):

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

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

Wiem, że pytanie jest stare, ale jak temat nie jest zamknięty, pomogę.

Atrybut „rozmiar” rozwiąże Twój problem.

Przykład:

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

selectmoże zawierać po optgroupjednej linii:

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

W tym przykładzie suma sizewynosi (1+1)+(1+2)=5.

Możesz to zrobić za pomocą prostego javascript ...

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

... lub ogranicz wysokość do liczby rekordów ...

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

Aby usunąć pasek przewijania, dodaj następujący CSS:

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

Oto fragment:

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>

Korzystanie z atrybutu rozmiaru jest najbardziej praktycznym rozwiązaniem, jednak istnieją pewne dziwactwa, gdy jest stosowany do wybierania elementów z tylko dwiema lub trzema opcjami.

• Ustawienie wartości atrybutu rozmiaru na „0” lub „1” spowoduje głównie renderowanie domyślnego elementu wyboru (menu rozwijanego).
• Ustawienie atrybutu rozmiaru na wartość większą niż „1” spowoduje przeważnie wyświetlenie listy wyboru o wysokości umożliwiającej wyświetlenie co najmniej czterech elementów. Dotyczy to również list zawierających tylko dwa lub trzy elementy, co prowadzi do niezamierzonych białych znaków.

Prosty JavaScript może być użyty do automatycznego ustawienia atrybutu rozmiaru na poprawną wartość, np. Zobacz to skrzypce .

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

Jak wspomniano powyżej, to rozwiązanie nie rozwiązuje problemu, gdy dostępne są tylko dwie lub trzy opcje.

przyjaciele: jeśli pobierasz dane z bazy danych: możesz wywołać to $ registerers = * _num_rows (Result_query) wtedy

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

Niedawno miałem to wymaganie i użyłem innych postów z tego pytania do stworzenia tego skryptu:

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

Aby dostosować rozmiar (wysokość) wszystkich wielokrotnych zaznaczeń do liczby opcji, użyj jQuery:

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

Możesz najpierw policzyć tag opcji, a następnie ustawić liczbę dla atrybutu rozmiaru. Na przykład w PHP możesz policzyć tablicę, a następnie użyć pętli foreach dla tablicy.

<?php $count = count($array); ?>
<select size="<?php echo $count; ?>" style="height:100%;">
<?php foreach ($array as $item){ ?>
    <option value="valueItem">Name Item</option>
<?php } ?>
</select>

Sposób renderowania pola wyboru jest określany przez samą przeglądarkę. Zatem każda przeglądarka pokaże wysokość pola listy opcji w innej wysokości. Nie możesz na to wpłynąć. Jedynym sposobem, w jaki możesz to zmienić, jest dokonanie własnego wyboru od podstaw.

Oto przykładowe użycie pakietu, które jest dość popularne w społeczności Laravel:

{!! 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' : ''),
]) !!}

Pakiet: https://laravelcollective.com/