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

Question

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

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

Answer 1

网页代码

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

请检查工作小提琴：演示

Answer 2

正如gcampbell所指出的，这是浏览器的工作，不能受到影响。如果你想让它设置样式，你必须创建自己的菜单。例如：

<div id="menu">
<p>1</p>
...
</div>
p{height:10px}
#menu{height:100px;overflow:scroll;}