Сделайте множественный выбор, чтобы настроить его высоту в соответствии с параметрами без полосы прокрутки

По-видимому, это не работает:

   select[multiple]{
     height: 100%;
   }

он заставляет выбор иметь высоту страницы 100% ...

auto тоже не работает, у меня все еще появляется вертикальная полоса прокрутки.

Есть другие идеи?

Я думаю, вы можете использовать sizeатрибут. Он работает во всех последних браузерах.

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

Вы можете сделать это с помощью sizeатрибута в selectтеге. Предположим, у вас есть 8 вариантов, тогда вы бы сделали это так:

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

Старый, но он сделает то, что вам нужно, без необходимости в jquery. Скрытое переполнение избавляет от полосы прокрутки, а javascript делает ее нужного размера.

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

И только крошечное количество javascript

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

Для jQuery вы можете попробовать это. Я всегда делаю следующее, и это работает.

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

Вы можете сделать это только в Javascript / JQuery, вы можете сделать это с помощью следующего JQuery (при условии, что вы указали для своего выбора идентификатор множественного выбора):

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

Демо: http://jsfiddle.net/AZEFU/

Я знаю, что вопрос старый, но как тема не закрывается, помогу.

Атрибут «размер» решит вашу проблему.

Пример:

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

selectможет содержать по optgroupодной строке:

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

В этом примере общая сумма sizeсоставляет (1+1)+(1+2)=5.

Вы можете сделать это с помощью простого javascript ...

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

... или ограничить высоту до количества записей ...

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

Чтобы удалить полосу прокрутки, добавьте следующий CSS:

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

Вот отрывок:

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>

Использование атрибута размера является наиболее практичным решением, однако при его применении для выбора элементов с двумя или тремя вариантами есть свои особенности.

• Установка для атрибута размера значения «0» или «1» в основном будет отображать элемент выбора по умолчанию (раскрывающийся список).
• Установка для атрибута размера значения больше «1» в большинстве случаев будет отображать список выбора с высотой, способной отображать как минимум четыре элемента. Это также относится к спискам, содержащим всего два или три элемента, что приводит к непреднамеренному пустому пространству.

Для автоматической установки правильного значения атрибута размера можно использовать простой JavaScript , например, см. Эту скрипку .

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

Как упоминалось выше, это решение не решает проблему, когда есть только два или три варианта.

друзья: если вы извлекаете данные из БД: вы можете вызвать это $ registers = * _num_rows (Result_query), тогда

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

Недавно у меня было это требование, и я использовал другие сообщения из этого вопроса для создания этого скрипта:

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

Чтобы настроить размер (высоту) всех множественных выделений в соответствии с количеством опций, используйте jQuery:

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

Вы можете сначала подсчитать тег опции, а затем установить счетчик для атрибута размера. Например, в PHP вы можете подсчитать массив, а затем использовать цикл foreach для массива.

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

Способ отображения поля выбора определяется самим браузером. Таким образом, каждый браузер будет показывать вам высоту окна списка опций на другой высоте. Вы не можете повлиять на это. Единственный способ изменить это - сделать собственный выбор с нуля.

Вот пример использования пакета, который довольно популярен в сообществе 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' : ''),
]) !!}

Пакет: https://laravelcollective.com/