Высота окна выбора HTML (выпадающее меню)

Я работаю над выпадающим плагином замены jquery для борьбы с этой проблемой. По состоянию на этот пост, он почти неотличим от родного выпадающего списка с точки зрения внешнего вида и функциональность.

вот демо (также ссылка для загрузки): http://programmingdrunk.com/current-projects/dropdownReplacement/

вот страница проекта плагин:

http://plugins.jquery.com/project/dropdownreplacement

(обновление:) страница плагина jquery, похоже, больше не работает. Я, вероятно, не поставлю свой плагин на их новый сайт, когда они его заработают, поэтому не стесняйтесь использовать programmingdrunk.com ссылка для демо / скачать

на самом деле вы вроде как можете! Не возитесь с javascript... Я просто застрял на том же самом для веб-сайта, который я делаю, и если вы увеличите атрибут "размер шрифта" в CSS для тега, то он автоматически увеличит высоту. Мелкая, но это то, что беспокоит меня много ха-ха

нет. Невозможно изменить высоту раскрывающегося списка select, поскольку это свойство зависит от браузера.

однако, если вы хотите эту функциональность, то есть много вариантов. Вы можете использовать bootstrap dropdown-menu и определить это max-height собственность. Что-то вроде этого.

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

Это не идеальное решение, но вроде работает.

в теге select Включите следующие атрибуты, где ' n ' - это количество выпадающих строк, которые будут видны.

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

есть три проблемы с этим решением. 1) есть быстрая вспышка всех элементов, показанных во время первого щелчка мыши. 2) позиция установлена в 'абсолютный' 3) Даже если есть меньше, чем' n ' элементов выпадающее окно будет по-прежнему для размера 'n' предметы.

The Chi Row ответ-хороший вариант для проблемы, но я нашел ошибку i onclick аргументов. Вместо этого было бы:

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

(и упомянуть, что вы должны заменить "n " С количеством строк вам нужно)