Зробіть кілька разів, щоб відрегулювати його висоту відповідно до параметрів без смуги прокрутки

Мабуть, це не працює:

   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/

Я знаю, що питання давнє, але як тема не закрита, я допоможу.

Атрибут "size" вирішить вашу проблему.

Приклад:

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

Використання атрибуту size є найбільш практичним рішенням, проте є примхи, коли він застосовується для вибору елементів, що мають лише два-три варіанти.

• Встановлення значення атрибуту розміру на "0" або "1" в основному буде відображати елемент вибору за замовчуванням (спадне меню).
• Встановлення атрибуту розміру значення, що перевищує "1", в основному відображатиме список вибору з висотою, здатною відображати щонайменше чотири елементи. Це стосується також списків із лише двома-трьома елементами, що призводить до ненавмисного пробілу.

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

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

Як було сказано вище, це рішення не вирішує питання, коли існує лише два-три варіанти.

друзі: якщо ви отримуєте дані з DB: ви можете зателефонувати до цього $ 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/