Как показать все опции выбранного элемента сразу?

Question

У меня есть элемент select.Мне нужно показать все опции одновременно, не опуская, как это изображение

Как я мог сделать это с помощью CSS?

Answer 1

В идеале, если вы нашли способ ограничить количество выбираемых элементов в <select multiple> [...] </select>, это решило бы проблему, поскольку select multiple показывает все варианты по умолчанию.

Однако я не смог найти способ сделать это онлайн, поэтому нам придется сделать это по-другому. Этот элемент имеет атрибут size, который представляет число option с, которое будет показано. Итак, если вы установите это количество элементов в вашем select, вам будут показаны все ваши элементы (просто не забудьте установить overflow: auto; в своем коде CSS, чтобы запретить показ полос прокрутки). Однако, если количество элементов не является фиксированным, вам придется изменить атрибут size с помощью JavaScript. Вот несколько примеров ниже.

var dynamic = document.getElementById('dynamic');

dynamic.setAttribute('size', dynamic.childElementCount)

.ns {
  overflow: auto;
}

<p>Normal selection:</p>
<select size="5">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
<select>

<p>Selection without scrollbar:</p>
<select class="ns" size="5">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
<select>

<p>Dynamic size selection:</p>
<select class="ns" id="dynamic">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
<select>

Очевидно, что вы также можете добавить свои собственные стили к элементу select и опциям