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


104

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

   select[multiple]{
     height: 100%;
   }

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

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

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

введите описание изображения здесь


1
Я думаю, вы застряли в использовании какого-то javascript. Я не верю, что есть способ, чтобы поле выбора автоматически растягивало css-only, чтобы оно содержало содержимое.
random_user_name

Решение на чистом CSS: stackoverflow.com/a/55969271/7910454
leonheess

Ответы:


148

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

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

2
Привет, Чем это отличается от того, что было сказано в вопросе, чтобы не работать?
Gravitate

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

2
Ах хорошо. На самом деле это не заставляет коробку сжиматься до размера содержимого, вам нужно вручную установить значение размера числа, что нормально, если вы знаете, сколько вариантов есть, но большая проблема, если есть динамическое количество вариантов . В этом случае вам нужно будет изменить размер атрибута размера при заполнении поля. Теперь понятно, спасибо за разъяснения.
Gravitate

20
Да ладно тебе! Если вы «заселяете» сервер, то знаете, сколько их будет. И если вы можете «заполнить» с помощью AJAX, изменение скромного атрибута не составит труда. Вы даже можете посчитать параметры в JS после "заполнения".
Tomasz Gandor

1
Это сработало, но высота <select> увеличивалась в соответствии с размером и, как следствие, искажала мой макет. ; (-
shubham

67

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

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

Это сработало, но высота <select> увеличивалась в соответствии с размером и, как следствие, искажала мой макет. ; (
shubham

как указать это значение в css?
Лей Ян

29

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

13

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

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

10

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

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

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


16
Та же идея, не полагаясь на высоту строки:$('select.expandable').each(function() { $(this).attr('size', $(this).find('option').length) })
Francesc Rosas

2
@ FrancescRosàs Идеально! Жаль, что это похоронено в комментарии, а не в принятом ответе.
Ник

5

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

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

Пример:

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

2
При условии, что в выборе всегда есть 30 вариантов.
Андерс Линден,

5

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.


Оба приведенных выше ответа технически верны, но это более интересный ответ.
russellmania 02

Я предпочитаю этот ответ, так как не знаю, сколько элементов появится в списке. Но я установил только: l.setAttribute ('size', l.childElementCount +1); (не вдвое больше, чем показано в коде выше)
Роберт Ахманн

@RobertAchmann Он не удваивает размер. Суммирует количество <optgroup>s и <option>s.
Андрей Немченко

3

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

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

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

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

Судя по всему, это больше не работает. Моя работа есть $('#firstSelect').attr('size', $('#firstSelect').length);. Посмотрите на эту скрипку: https://jsfiddle.net/ergt5upf/2/
juntapao

3

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


1

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

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

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

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

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


1
Это решение требует jQuery и поэтому, на мой взгляд, не является «простым JavaScript». Кроме того, этот код уже был показан в более ранних ответах ..
handle

0

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

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

0

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

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

0

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

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

0

Вы можете сначала подсчитать тег опции, а затем установить счетчик для атрибута размера. Например, в 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>

-1

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


-1

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


1
Это не Laravel, это пакет Laravel.
Эмоциональность

1
Спасибо за исправление. Собираюсь обновить пост.
Синан Эльдем
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.