In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > size (keygen, select)

size property (keygen, select)

Browser support:

Specifies or returns the count of the visible option items in a selection list. The selection list can be a select element or the selection list of a keygen element.

If the value of the size property is greater than one, the appearance of the selection list is a list box.

Syntax:

object.size;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: size

Possible values:

Integer that sets or retrieves the count of the visible options.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the size attribute:

Three rows are visible from the drop-down list:
<br /><br />
<select size="3">
    <option />Apple
    <option />Pear
    <option selected="selected" />Peach
    <option />Cherry
    <option />Melon
    <option />Apricot
</select>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the size property:

<head>
    <script type="text/javascript">
        function ChangeSelectSize () {
            var select = document.getElementById ("fruits");
            var input = document.getElementById ("myInput");

            select.size = input.value;
        }
    </script>
</head>
<body>
    <select id="fruits" size="2">
        <option />Apple
        <option />Pear
        <option selected="selected" />Peach
        <option />Cherry
        <option />Melon
        <option />Apricot
    </select>

    <br />
    <input id="myInput" type="text" value="5" />
    <br />
    <button onclick="ChangeSelectSize ();">Change the size of the SELECT element!</button>
</body>