javascript - Need Scroll Bar for Drop Down List populated by ng-options - Stack Overflow

admin管理员组

文章数量:1414929

I have this code which populates the drop dopwn menu:

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

I want to be able to only show maybe 8 options then be able to scroll down to see the rest. How do I go about doing this? When I adjust the height, it just adjusts the height of the actual field instead of the drop down size.

This is not what I want:

TURNS OUT IF THE LIST IS LONG ENOUGH, IT WILL AUTOMATICALLY ADD A SCROLL BAR. THIS IS NOT ORIGINALLY WHAT I WANTED. IT WOULD BE EASIER IF THERE WERE 8 SHOWS SHOWN TO START WITH AND BE ABLE TO SCROLL THROUGH THE REST.

I have this code which populates the drop dopwn menu:

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

I want to be able to only show maybe 8 options then be able to scroll down to see the rest. How do I go about doing this? When I adjust the height, it just adjusts the height of the actual field instead of the drop down size.

This is not what I want:

TURNS OUT IF THE LIST IS LONG ENOUGH, IT WILL AUTOMATICALLY ADD A SCROLL BAR. THIS IS NOT ORIGINALLY WHAT I WANTED. IT WOULD BE EASIER IF THERE WERE 8 SHOWS SHOWN TO START WITH AND BE ABLE TO SCROLL THROUGH THE REST.

• javascript
• php
• html
• css
• angularjs

Share Improve this question Follow edited May 26, 2017 at 13:09 J.Do asked May 26, 2017 at 11:25 J.DoJ.Do 20111 gold badge77 silver badges3131 bronze badges 4

• 1 Have you tried to add the attribute size=8 in the html of the select? – quirimmo Commented May 26, 2017 at 11:30
• @quirimmo Yeah, it just expands the actual field instead of giving the drop down area a scroll bar. – J.Do Commented May 26, 2017 at 11:49
• @JDo did you integrate it with the CSS overflow-y: scroll; – quirimmo Commented May 26, 2017 at 11:59
• @quirimmo Yes. Just updated the question. As mentioned, it expands the actual field but it does give a scroll bar but I don't want it to increase the height of it. – J.Do Commented May 26, 2017 at 12:04

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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

This should do it for you. Adjust max-height as necessary.

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

Maybe you can this implement HTML/JS/CSS solution into Angular?

 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>

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

 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>

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

本文标签： javascriptNeed Scroll Bar for Drop Down List populated by ngoptionsStack Overflow