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

Question

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

   select[multiple]{
     height: 100%;
   }

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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