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

Ответ 1

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

<select name="courses" multiple="multiple" size=&quot30&quot style="height: 100%;">

Ответ 2

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

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

Ответ 3

Старый, но это сделает то, что вам нужно, без необходимости 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;

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

Я знаю, что вопрос старый, но как тема не закрыта. Я дам свою помощь.

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

Пример:

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

Ответ 7

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

https://jsfiddle.net/maars/ou5f3jzy/

Ответ 8

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

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

... или предельная высота до номера записей...

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

Ответ 9

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

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

Ответ 10

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

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

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

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

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

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

Чтобы удалить полосу прокрутки, добавьте следующий 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>

Ответ 14

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