How to Auto-focus a Select2 Dropdown on Page Load

To auto-focus a Select2 dropdown on page load, call $('#mySelect2').select2('open') after the element has been initialized as a Select2 and after the DOM is ready. This both opens the dropdown and focuses the internal search input — Select2’s plain focus() doesn’t do this because Select2 hides the original <select> behind custom DOM.

Contents

TL;DR
Why .focus() doesn’t work
Order matters: init first, then open
Close programmatically too
Frequently asked questions
Related guides
References

Last verified: 2026-05-17 with Select2 4.1.0+ and jQuery 3.7+. Originally published 2023-03-13, rewritten and updated 2026-05-17.

TL;DR

<select id="mySelect2">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<script>
$(function () {
  $('#mySelect2').select2();        // initialize
  $('#mySelect2').select2('open');  // open + focus the search box
});
</script>

Why `.focus()` doesn’t work

Select2 hides the original <select> element and replaces it with its own DOM — a styled container plus an internal search input that only appears when the dropdown is open. Calling $('#mySelect2').focus() focuses the hidden native element, not anything the user can see.

The Select2 API has a method for this exact use case: .select2('open'). It opens the dropdown and, in the same call, focuses the internal search input — equivalent to the user clicking the Select2 control with the mouse.

Select2 auto-focus on page load — select2('open') opens dropdown and focuses search

Order matters: init first, then open

$(function () {
  // 1. Initialize as a Select2 (does nothing yet)
  $('#mySelect2').select2({
    placeholder: 'Choose one',
    width: 'resolve',
  });

  // 2. Then ask Select2 to open it
  $('#mySelect2').select2('open');
});

Calling .select2('open') before .select2() throws “select2 is not a function” — the plugin only attaches its API methods after initialization.

Close programmatically too

// Open
$('#mySelect2').select2('open');

// Close
$('#mySelect2').select2('close');

// Pre-select an option and close
$('#mySelect2').val('2').trigger('change').select2('close');

Frequently asked questions

Why doesn’t $('#mySelect2').focus() open the dropdown?

Because Select2 replaces the native <select> with a hidden input wrapped in custom DOM. Calling focus() on the original element focuses something the user can’t see. Select2 exposes a programmatic API for this exact case — .select2('open') — that opens the dropdown and focuses the internal search input.

Where in my code should I call .select2('open')?

After the element is initialized as a Select2 and after the DOM is ready. The safest spot is inside a $(document).ready(...) handler, immediately after the .select2() initialization call: $('#mySelect2').select2(); $('#mySelect2').select2('open');.

Does this work with multiple Select2s on the page?

Yes, but only one can be open at a time — opening a second auto-closes the first. If you really need them all ‘pre-open’ you can’t (Select2 by design), but you can open the first and let the user tab to the others.

Why open it on page load at all?

Two common reasons: (1) you have a single-purpose page (an order entry form, a search interface) where the very first action is to pick from the dropdown — opening it saves a click; (2) for accessibility, focus + open signals ‘start here’ to screen readers without a separate label.

Can I close it programmatically too?

$('#mySelect2').select2('close'). Mirrors the open method. Useful for closing after a programmatic selection: $('#mySelect2').val('2').trigger('change').select2('close');.