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

Question

Видимо, это не работает:

   select[multiple]{
     height: 100%;
   }

это делает выборку с 100% высотой страницы ...

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

Есть еще идеи?

Answer 1

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

<select name="courses" multiple="multiple" <b>size=&quot<i>30</i>&quot</b> style="height: 100%;">

Answer 2

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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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

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

Пример:

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

Answer 8

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

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

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

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

Answer 9

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

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

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

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

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

Answer 10

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

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