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,

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

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

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

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.

Related: How to Check if User has Selected Any Value in an HTML SELECT Element using jQuery

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.

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

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

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

Also Read: How to Populate a SELECT Element with Data from SQL Server using Asp.Net C#

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.

That’s it. Thanks for reading.

Previous - Dynamically Add or Remove Table Rows in JavaScript and Save Data to a DatabaseNext - Check Image Width, Height and its Type before Uploading using JavaScript



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!