89

有人可以确认无法更改单击选择框时显示的下拉列表的高度。

select 的 size 属性使它看起来像一个列表，CSS 中的 height 属性也没有多大用处。

4

8 回答 8

96

确认的。

下拉的部分设置为：

  1. 显示所有条目所需的高度，或
  2. 显示条目所需的高度x（使用滚动条查看剩余部分），x其中
    • 20 在 Firefox 和 Chrome
    • IE 6、7、8 中的 30
    • 16 为 Opera 10
    • 14 为 Opera 11
    • 22 用于 Safari 4
    • 18 用于 Safari 5
    • IE 5.0、5.5 中的 11
  3. 在 IE/Edge 中，如果没有选项，则会出现 11 个空白条目的愚蠢高列表。

对于上面的 (3)，您可以在此JSFiddle中看到结果

于 2009-02-20T18:04:19.140 回答
9

没有。无法更改选择下拉菜单的高度，因为该属性是特定于浏览器的。

但是，如果您想要该功能，那么有很多选择。您可以使用引导程序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>

于 2017-05-09T07:16:45.640 回答
5

我一直在研究一个下拉替换 jquery 插件来解决这个问题。在这篇文章中，就外观和功能而言，它与原生下拉菜单几乎没有区别。

这是一个演示（也是下载链接）： http: //programmingdrunk.com/current-projects/dropdownReplacement/

这是插件的项目页面：

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

(更新:) jquery 插件页面似乎不再工作。当他们开始工作时，我可能不会把我的插件放在他们的新网站上，所以请随意使用programmingdrunk.com链接进行演示/下载

于 2010-05-04T15:38:23.047 回答
2

其实你有点可以！不要为 javascript 烦恼...我只是在我正在制作的网站上停留在同一件事上，如果您在 CSS 中为标签增加“font-size”属性，那么它也会自动增加高度。琐碎，但它让我很困扰哈哈

于 2011-04-21T07:42:47.570 回答
0

这不是一个完美的解决方案，但它确实有效。

在选择标签中，包括以下属性，其中“n”是可见的下拉行数。

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

这个解决方案存在三个问题。1) 在第一次鼠标单击期间显示的所有元素都会快速闪烁。2) 位置设置为“绝对” 3) 即使少于“n”个项目，下拉框仍然是“n”个项目的大小。

于 2013-12-19T21:43:00.253 回答
0

Chi Row的答案是解决这个问题的一个不错的选择，但我在onclick论点中发现了一个错误。相反，将是：

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

（并提到您必须将“ n ”替换为您需要的行数）

于 2015-02-12T13:04:43.747 回答
0

我知道这不是更改高度的最佳做法select，但是有一个代码可能可以帮助您更改高度。

使用标签的size属性：select

<select onfocus='this.size=6;' onblur='this.size=6;' onfocusout='this.size=null;' onchange='this.size=6; this.blur();'>
    <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>
    <option>Option 9</option>
    <option>Option 10</option>
    <option>Option 11</option>
    <option>Option 12</option>
    <option>Option 13</option>
    <option>Option 14</option>
    <option>Option 15</option>
</select>

于 2021-04-23T16:24:26.343 回答
-2

你可以改变一个的高度。不要使用height="500"（只是一个示例数字）。使用风格。您可以使用<style>标签或只使用它：

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

我强调变化：

  <select id="option" style="height: 100px;">

甚至更好...

style="height: 100px;">

你看到了吗？

有帮助就点个赞吧！

于 2020-05-20T05:29:53.813 回答