极品滚动条的下拉列表填充伍选项

我有这样的代码，其填充下降dopwn菜单：极品滚动条的下拉列表填充伍选项

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个展示开始，并且能够通过其他客户进行滚动，IT会更容易。

来源

2017-05-26 J.Do

您是否尝试过在选择的HTML添加属性'大小= 8'？ – quirimmo

@quirimmo是的，它只是扩大了实际的领域，而不是让下拉区域成为一个滚动条。 –

@JDo你是否将它与CSS overflow-y：scroll; – quirimmo

<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>

来源

2017-05-26 13:33:51 quirimmo

这不是一个巨大的风扇，看起来如何，但我想我会暂时使用它。谢谢。 –

我知道这是一个小的解决方法，但实际上，如果你不想使用CSS，这看起来就像实现你所需要的最简单的方法。如果这符合你的问题，请投票和接受，以便将来也可以对其他同样问题的人有用 – quirimmo

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

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

来源

2017-05-26 11:30:40 JokingBatman

刚试过这个，这调整了实际的领域，它不添加滚动条？ –

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>

纳克级= “{scrollClass'：show_name.length> 8}”

CSS：

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

来源

2017-05-26 11:35:24 CodeMan

在你的CSS中，你会错过一个。它应该是.scrollClass – quirimmo

@quirimmo：谢谢更新.. – CodeMan

你的ng级也应该倒置 – quirimmo

也许你可以这样在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>

来源

2017-05-26 11:58:45

回答

相关问题