将 select 下拉列表中的选项限制为特定数量

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

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

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

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

Answer 2

HTML Code

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

请检查工作fiddle： Demo

将 select 下拉列表中的选项限制为特定数量

Limiting options in select dropdown to a specific number

javascript

html

user-interface

user-interaction