将<select>显示为只有一个选择的可滚动列表？</select>

Question

我有一个<select>列表，看起来像这样。

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

我希望它看起来像这样。

现在，可以通过添加multiple和size属性来实现这一目标。

<select multiple size="3">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

但这也允许用户选择多个元素。只有size="3"不起作用（至少在Firefox 28.0中）;它显示为下拉列表。

规范here似乎没有包含任何可以解决问题的属性，尽管它确实说明了

  

浏览器不需要将选择元素显示为滚动列表框。

但有什么方法可以让它看起来我想要的但仍然只允许一个选择？使用JavaScript的简单解决方法也适合我。

Answer 1

根据我的经验，size="3"可以解决问题：http://jsfiddle.net/pU39G/

<select size="3">  <!-- Note: I've removed the 'multiple' attribute -->
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

在Chrome 33和Firefox 27上测试过。我仍然没有Firefox 28，但如果它在那里不起作用，那么它似乎是一种回归。