HTML - 更改下拉框中多选项的最大行数

Question

那么我该如何更改启用多选的下拉标签应显示的行数：

<select multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

这将仅显示前四个选项，如何在不滚动的情况下显示第五个选项？

- Mich'

Answer 1

使用 size 属性：

<select size="5" multiple name="whatever">

参考文献：

• <select> 元素.

- David Thomas

---

鉴于您明确表示要显示五行，我不确定我理解您的问题？ - David Thomas

我恐怕目前看不到其他选择（虽然我不习惯这种行为）。 - David Thomas

Answer 2

您可以使用CSS指定确切的高度，但由于不同的选择呈现方式，这可能在所有浏览器中都无法完全相同:

<select multiple="multiple" style="height: 24pt">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

Fiddle: http://jsfiddle.net/24Myw/

- darwin

Answer 3

<select size="any number" name="#" id="#">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

IT工作正常运行。

- Eng Maisa

Answer 4

这里有一个使用JavaScript更具动态性的解决方案：

// put your select into a variable for faster reference.
var mySelect = document.getElementById("my_select");
//decide on the maximum number of options you want displayed and store it in a variable.
//that makes it easier to change if you change your mind on the max or if you want a more dynamic max.
var maxOptions = 5;
// if you have maxOptions or fewer options.
if(mySelect.options.length <= maxOptions){ 
    //set your select size to your option length.
    mySelect.size = mySelect.options.length; 
}else{
    // if you have more than maxOptions options, set your select size to maxOptions.
    mySelect.size = maxOptions;
}

注意！请注意，“multiple”属性不仅显示多个选项，还使您能够选择多个选项！

- Jonas Alexander Offersen

---

有时候我们需要一种方法来显示多行文本，但只允许单选。有没有人知道如何直接实现这个功能而不使用JavaScript小部件？换句话说，多行显示和多行选择应该是独立的特性，它们似乎被捆绑在HTML标准中了。其中一个是视觉特性，另一个是领域（数据）特性。 - FloverOwe

@FloverOwe 我在考虑将选定的选项设置为 e.target，或者只是禁用 shift 按钮的 keydown 事件就可以解决问题。我还没有进行实验来支持这个说法。 - Jonas Alexander Offersen