将选择下拉列表中的选项限制为特定数字答案

【问题标题】：Limiting options in select dropdown to a specific number将选择下拉列表中的选项限制为特定数字
【发布时间】：2016-07-11 09:45:27
【问题描述】：

我有一个下拉列表，下拉列表中的选项小于或等于 10，这将显示所有可用选项，但如果选项数量超过 10，则选项列表应该有一个垂直滚动条。

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>

【问题讨论】：

How can I limit the visible options in an HTML <select> dropdown?的可能重复

标签： javascript html user-interface user-interaction

【解决方案1】：

HTML 代码

<select onmousedown="if(this.options.length>15){this.size=15;}" onchange='this.size=0;' onblur="this.size=0;">
 <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>
 <option>11</option>
 <option>12</option>
 <option>13</option>
 <option>14</option>
 <option>15</option>
 <option>16</option>
 <option>17</option>
 <option>18</option>
 <option>19</option>
 <option>20</option>
 <option>21</option>
 <option>22</option>
 <option>23</option>
 <option>24</option>
 <option>25</option>
</select>

请检查工作小提琴： Demo

【讨论】：

【解决方案2】：

正如 gcampbell 所说，这是浏览器的工作，不能受到影响。如果你想要它的风格，你必须创建自己的菜单。例如：

<div id="menu">
<p>1</p>
...
</div>

p{height:10px}
#menu{height:100px;overflow:scroll;}

【讨论】：