Basic Select2

To use add select2 class in select tag.

Select Alaska Hawaii California Nevada Oregon Washington Arizona Colorado Idaho Montana Nebraska New Mexico North Dakota Utah Wyoming Alabama Arkansas Illinois Iowa Kansas Kentucky Louisiana Minnesota Mississippi Missouri Oklahoma South Dakota Texas Tennessee Wisconsin Connecticut Delaware Florida Georgia Indiana Maine Maryland Massachusetts Michigan New Hampshire New Jersey New York North Carolina Ohio Pennsylvania Rhode Island South Carolina Vermont Virginia West Virginia

Single Select with selected menu

To use add selected to any particuler menu.

Select Alaska Hawaii California Nevada Oregon Washington Arizona Colorado Idaho Montana Nebraska New Mexico North Dakota Utah Wyoming Alabama Arkansas Illinois Iowa Kansas Kentucky Louisiana Minnesota Mississippi Missouri Oklahoma South Dakota Texas Tennessee Wisconsin Connecticut Delaware Florida Georgia Indiana Maine Maryland Massachusetts Michigan New Hampshire New Jersey New York North Carolina Ohio Pennsylvania Rhode Island South Carolina Vermont Virginia West Virginia

Percentage width to Select2(Responsive)

To use add give Pertage to the select tag.

Select Alaska Hawaii California Nevada Oregon Washington Arizona Colorado Idaho Montana Nebraska New Mexico North Dakota Utah Wyoming Alabama Arkansas Illinois Iowa Kansas Kentucky Louisiana Minnesota Mississippi Missouri Oklahoma South Dakota Texas Tennessee Wisconsin Connecticut Delaware Florida Georgia Indiana Maine Maryland Massachusetts Michigan New Hampshire New Jersey New York North Carolina Ohio Pennsylvania Rhode Island South Carolina Vermont Virginia West Virginia

Single Placeholder

Select2 supports displaying a placeholder value using the placeholder configuration option. The placeholder value will be displayed until a selection is made.

Alaska Hawaii California Nevada Oregon Washington Arizona Colorado Idaho Montana Nebraska New Mexico North Dakota Utah Wyoming Alabama Arkansas Illinois Iowa Kansas Kentucky Louisiana Minnesota Mississippi Missouri Oklahoma South Dakota Texas Tennessee Wisconsin Connecticut Delaware Florida Georgia Indiana Maine Maryland Massachusetts Michigan New Hampshire New Jersey New York North Carolina Ohio Pennsylvania Rhode Island South Carolina Vermont Virginia West Virginia

Disabled Select2

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.

Alaska Hawaii California Nevada Oregon Washington Arizona Colorado Idaho Montana Nebraska New Mexico North Dakota Utah Wyoming Alabama Arkansas Illinois Iowa Kansas Kentucky Louisiana Minnesota Mississippi Missouri Oklahoma South Dakota Texas Tennessee Wisconsin Connecticut Delaware Florida Georgia Indiana Maine Maryland Massachusetts Michigan New Hampshire New Jersey New York North Carolina Ohio Pennsylvania Rhode Island South Carolina Vermont Virginia West Virginia

Hiding Search Element

Select2 allows you to hide the search box using the minimumResultsForSearch configuration option. In this example, we use the value Infinity to tell Select2 to never display the search box.

Alaska Hawaii California Nevada Oregon Washington Arizona Colorado Idaho Montana Nebraska New Mexico North Dakota Utah Wyoming Alabama Arkansas Illinois Iowa Kansas Kentucky Louisiana Minnesota Mississippi Missouri Oklahoma South Dakota Texas Tennessee Wisconsin Connecticut Delaware Florida Georgia Indiana Maine Maryland Massachusetts Michigan New Hampshire New Jersey New York North Carolina Ohio Pennsylvania Rhode Island South Carolina Vermont Virginia West Virginia

Select with Icon

To use add data-icon to set icon with menu and use class select2-with-icons in the select tag.

Firefox Safari Opera Chrome Internet Explorer HTML5 Pinterest WordPress Codepen Drupal