SELECT Element Set Focus on Page Load or Expand SELECT Options on Page Load

In this post, I am sharing two quick examples on SELECT element. The first example shows how to set focus on a SELECT element or a DropDown list on page load. In the second example, I’ll show how to Expand the SELECT element automatically when the page loads. Both examples use HTML5 attributes and JavaScript to perform the functions.

The <select> element, as you know, provides a menu of options. It’s a dropdown list. In many occasions, you might wish to set focus directly on this element, when the page loads. Sometimes, you will also require showing all or few options automatically to your users, when the page loads or with the click of a button.

Set Focus on <select> Element on Page Load

There are two ways you can set focus automatically on the <select> element, either on page load or using some other event.

• autofocus: This is an HTML5 feature. You can add the autofocus option to a <select> element, and the focus will be on the element when the page loads. It’s a Boolean attribute, that is, true or false.

Note: You can have only one autofocus attribute on an element in a form. For example,

<html>
<head>
    <title>Set Focus on SELECT Element on Page Load</title>
</head>
<body>
    <p>The focus, as you can see, is set on the SELECT element (below) when the page loaded!</p>

    <select id="sel" autofocus>
        <option>-- Choose a Name --</option>
        <option value="Mourning Dove">Mourning Dove</option>
        <option value="Rock Pigeon">Rock Pigeon</option>
        <option value="Eurasian Collared-Dove">Eurasian Collared-Dove</option>
        <option value="Monk Parakeet ">Monk Parakeet </option>
        <option value="Inca Dove">Inca Dove</option>
    </select>
</body>

<script>
    window.onload = function () {
        document.getElementById('sel').focus();
    };
</html>

Try it

• JavaScript focus(): You can use JavaScript’s focus() method to set focus on a <select> element on page load. For example,

Automatically Expand <select> Options on Page Load

You can use either the HTML5 feature or a simple JavaScript method to expand the all or few options on the <select> element. Automatically expanding a <select> element means to show the options inside the element without using the mouse or keyboard functions.

• size: Using the HTML5 size attribute, you can expand the <select> element or show all or few options. The attribute takes a numeric value. The default is 0. For example, I want show only four <select> options automatically when the page loads.

<html>
<head>
    <title>Automatically expand SELECT options on Page load</title>
</head>
<body>
    <p>The SELECT element has expanded itself on Page load!</p>

    <select id="sel" size="4">
        <option>-- Choose a Name --</option>
        <option value="Mourning Dove">Mourning Dove</option>
        <option value="Rock Pigeon">Rock Pigeon</option>
        <option value="Eurasian Collared-Dove">Eurasian Collared-Dove</option>
        <option value="Monk Parakeet ">Monk Parakeet </option>
        <option value="Inca Dove">Inca Dove</option>
    </select>
</body>

<script>
    window.onload = function () {
        var element = document.getElementById('sel');   // GET THE <select> ELEMENT BY ITS ID.
        element.size = 4;  // SET THE NUMBER OF VISIBLE OPTIONS.
    };
</script>
</html>

Try it

• Using JavaScript: You can use the <select> size property inside your JavaScript. Here’s how you do it.

Use both the features

You can use both features together on the <select> element, that is, set focus and expand the element on page load.

• Using autofocus and size Attributes together

<select id="sel" autofocus size="4">
…
</select>

• Using JavaScript

<script>
    window.onload = function () {
        var element = document.getElementById('sel');
        expandSelect(element);
    };

    function expandSelect(ele) {
        ele.size = 4;
        ele.focus();
    }
</script>

Conclusion

Knowing both the options will help perform the function in different scenarios. The autofocus and size attributes (like many other HTML5 attributes) are browser specific and may not work as desired in many old browsers. In that case, the JavaScript methods will be useful.

← PreviousNext →