需要由 ng-options 填充的下拉列表的滚动条答案

【问题标题】：Need Scroll Bar for Drop Down List populated by ng-options需要由 ng-options 填充的下拉列表的滚动条
【发布时间】：2017-10-27 06:40:53
【问题描述】：

我有这个填充下拉菜单的代码：

echo "<div class='form-group'>";
echo "<label for='show'>Show:</label>";
echo "<select class='form-control' id='filterText' ng-model='filterText' ng-options='show_name for show_name in filterList'>"; // Show Type Dropdown
echo "</select>";
echo "</div>";

我希望只能显示 8 个选项，然后能够向下滚动查看其余选项。我该怎么做呢？当我调整高度时，它只是调整实际字段的高度而不是下拉大小。

这不是我想要的：

如果列表足够长，它会自动添加滚动条。这本来不是我想要的。如果开始时显示 8 个节目并能够滚动浏览其余节目，会更容易。

【问题讨论】：

有没有试过在select的html中添加属性size=8？
@quirimmo 是的，它只是扩展了实际字段，而不是为下拉区域提供滚动条。
@JDo 你是否将它与 CSS 溢出-y: 滚动；
@quirimmo 是的。刚刚更新了问题。如前所述，它扩展了实际字段，但确实提供了一个滚动条，但我不希望它增加它的高度。

标签： javascript php html css angularjs

【解决方案1】：

<div class='form-group'>
  <label for='show'>Show:</label>
  <select size='1' onmousedown='if (this.options.length > 8){this.size = 8}' onchange='this.size = 0' onblur="this.size = 1" class='form-control' id='filterText'>

    <option selected>Select</option>
    <option>Dr. Salunkhe</option>
    <option>Pregnancy</option>
    <option>COVID</option>
    <option>Opthamologist</option>
    <option>Physician</option>
    <option>Orthapedician</option>


  </select>
</div>

【讨论】：

考虑添加一些文本来支持您的代码。

【解决方案2】：

 select {
    position:absolute;
 }

<div class='form-group'>
  <label for='show'>Show:</label>
  <select size='1' onmousedown='if (this.options.length > 8){this.size = 8}' onchange='this.size = 0' onblur="this.size = 1" class='form-control' id='filterText'>

    <option selected>Select</option>
    <option>Physician</option>
    <option>Dr. Salunkhe</option>
    <option>Orthopedician</option>
    <option>Opthamologist</option>
    <option>COVID</option>
   
  </select>
</div>

【讨论】：

欢迎来到 StackOverflow。虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的回答添加解释并说明适用的限制和假设。

【解决方案3】：

<select onfocus='if(this.options.length > 8){ this.size = 8; }' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
</select>
<br>
<select onfocus='if(this.options.length > 8){ this.size = 8; }' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

【讨论】：

不太喜欢这个外观，但我想我会暂时使用它。谢谢。
我知道这是一种解决方法，但实际上如果您不想使用 CSS，这看起来是实现所需功能的最简单方法。如果这符合您的问题，请投票并接受，以便将来对遇到相同问题的其他人也有用

【解决方案4】：

HTML:

<div class='form-group'>
    <label for='show'>Show:</label>
    <select class='form-control' ng-class="{scrollClass' : show_name.length > 8}"

    id='filterText' ng-model='filterText' ng-options='show_name for show_name in filterList'></select>
</div>

ng-class="{scrollClass' : show_name.length > 8}"

CSS：

 .scrollClass{
            max-height: 300px;
            overflow-y: scroll;
 }

【讨论】：

在你的 CSS 中你错过了一个 .它应该是 .scrollClass
你的 ng-class 也应该倒置
@CodeMan 如果我只输入ng-class='scrollClass'，这将不起作用。
@J.Do ：我的意思是当结果数超过 8 时，我们将类应用于 div。
@CodeMan 即使我应用您编写的代码，我仍然会得到这个：errors.angularjs.org/1.6.3/$parse/…

【解决方案5】：

也许你可以在 Angular 中实现 HTML/JS/CSS 解决方案？

 select {
    position:absolute;
 }

<div class='form-group'>
  <label for='show'>Show:</label>
  <select size='1' onmousedown='if (this.options.length > 8){this.size = 8}' onchange='this.size = 0' onblur="this.size = 1" class='form-control' id='filterText'>

    <option selected>Select</option>
    <option>This is an option</option>
    <option>This is another Option A</option>
    <option>This is another Option 2</option>
    <option>This is another Option 3</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option B</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>

  </select>
</div>

【讨论】：

【解决方案6】：

 select {
            max-height: 300px;
            overflow-y: scroll;
 }

这应该为你做。根据需要调整最大高度。

【讨论】：

刚试过这个，这会调整实际字段的大小，但它没有添加滚动条？