javascript - HTML - 更改选择标签上的最大行数

Question

那么如何更改应显示多个启用的选择标记的行数：

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

这只会显示前四个选项我如何显示第五个而不必滚动？

Answer 1

使用size属性：

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

参考：

• <select>元素。

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>

小提琴：http: //jsfiddle.net/24Myw/

Answer 3

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

它运作良好

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

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