Question

我有这个代码填充drop 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个显示开始并且可以通过REST滚动，那么它会更容易。

Answer 1

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

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

Answer 2

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>

<强>纳克级=＆＃34; {scrollClass＆＃39; ：show_name.length＆gt; 8}＆＃34;

<强> CSS：

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

Answer 3

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

Answer 4

＆＃13;

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

＆＃13;

Answer 5

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

Answer 6

 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>

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

6 个答案: