select2/pages/05.dropdown/docs.md

title	taxonomy	process	never_cache_twig
Dropdown	category docs	twig true	true

This chapter covers the appearance and behavior of the dropdown menu.

Templating

The appearance of search results in the dropdown can be customized by using the templateResult option:

Disabling options

Select2 will correctly handle disabled options, both with data coming from a standard select (when the disabled attribute is set) and from remote sources, where the object has disabled: true set.

First Second (disabled) Third

<select class="js-example-disabled-results">
  <option value="one">First</option>
  <option value="two" disabled="disabled">Second (disabled)</option>
  <option value="three">Third</option>
</select>

Automatic selection

Select2 can be configured to automatically select the currently highlighted result when the dropdown is closed by using the selectOnClose option:

$('select').select2({
  selectOnClose: true
});

Forcing the dropdown to remain open after selection

You may use the closeOnSelect option to prevent the dropdown from closing when a result is selected:

$('select').select2({
  closeOnSelect: false
});

Dropdown placement

The dropdownParent option allows you to pick an element for the dropdown to be appended to:

$('select').select2({
  dropdownParent: $('#my_amazing_modal')
});

Using a Select2 control inside a Bootstrap modal

If you're having trouble using the search box inside a Bootstrap modal, trying setting the dropdownParent option to the modal element.

Dropdown option groups

In HTML, <option> elements can be grouped by wrapping them with in an <optgroup> element:

<select>
  <optgroup label="Group Name">
    <option>Nested option</option>
  </optgroup>
</select>

Select2 will automatically pick these up and render them appropriately in the dropdown.

Hierarchical options

Only a single level of nesting is allowed per the HTML specification. If you nest an <optgroup> within another <optgroup>, Select2 will not be able to detect the extra level of nesting and errors may be triggered as a result.

Furthermore, <optgroup> elements cannot be made selectable. This is a limitation of the HTML specification and is not a limitation that Select2 can overcome.

If you wish to create a true hierarchy of selectable options, use an <option> instead of an <optgroup> and change the style with CSS. Please note that this approach may be considered "less accessible" as it relies on CSS styling, rather than the semantic meaning of <optgroup>, to generate the effect.