带有滚动条的Html下拉框选项

Question

我一直在努力为这个问题寻找一个解决方案和示例。

我们有一个有很多选项的组合框，范围从1到至少100。

我们的客户并不总是使用正确的分辨率，因此有些选项会滚出屏幕。

我们想要的是拥有普通的HTML组合框但是当你点击它时会显示一个“框”，它只显示10个选项，滚动条滚动到其他90个选项

示例：

这个例子（可能）是在winforms中制作的，但我希望将它作为html / javascript（jquery）。除非您单击控件（正常组合框将起作用）

，否则此选项将不可见

尝试 我已经： - 尝试将组合框放在div中并给它一个大小。但是这会让它失去弹出功能，我们希望保留它。

• 在stackoverflow中尝试了其他有关使用垂直滚动条的组合框（下拉框）的帖子

• 添加了“size ='5'”但这只会使它成为一个列表框而不是组合框

• 添加了“multiple ='yes'”，但这对我的事业没有任何帮助

Answer 1

你可以试试这个..

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">
     <option value="1">This is select number 1</option>
     <option value="2">This is select number 2</option>
     <option value="3">This is select number 3</option>
     <option value="4">This is select number 4</option>
     <option value="5">This is select number 5</option>
     <option value="6">This is select number 6</option>
     <option value="7">This is select number 7</option>
     <option value="8">This is select number 8</option>
     <option value="9">This is select number 9</option>
     <option value="10">This is select number 10</option>
     <option value="11">This is select number 11</option>
     <option value="12">This is select number 12</option>
   </select>

Answer 2

我不确定我是否得到它，但this是你想要的：你可以设置生成的选择项的大小。

Answer 3

在组件中添加此行样式：style =“height：200px; width：300px;”。

。 。 。