A jQuery plugin for Bootstrap 4 that converts <select>
and <select multiselect>
elements to dropdowns. Uses Bootstrap's dropdown plugin and fuse.js for fuzzy search.
Use Bootstrap Select Dropdown to improve the user experience for long option lists. Compared to a regular multiselect, this plugin adds:
a search box;
keyboard navigation for search; and
select/deselect all controls.
Select a country
Afghanistan
Åland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antarctica
Antigua & Barbuda
Argentina
Armenia
Aruba
Ascension Island
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia & Herzegovina
Botswana
Brazil
British Indian Ocean Territory
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burundi
Cambodia
Cameroon
Canada
Canary Islands
Cape Verde
Caribbean Netherlands
Cayman Islands
Central African Republic
Ceuta & Melilla
Chad
Chile
China
Christmas Island
Cocos (Keeling) Islands
Colombia
Comoros
Congo - Brazzaville
Congo - Kinshasa
Cook Islands
Costa Rica
Côte d’Ivoire
Croatia
Cuba
Curaçao
Cyprus
Czechia
Denmark
Diego Garcia
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
Equatorial Guinea
Eritrea
Estonia
Ethiopia
Eurozone
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Southern Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guernsey
Guinea
Guinea-Bissau
Guyana
Haiti
Honduras
Hong Kong SAR China
Hungary
Iceland
India
Indonesia
Iran
Iraq
Ireland
Isle of Man
Israel
Italy
Jamaica
Japan
Jersey
Jordan
Kazakhstan
Kenya
Kiribati
Kosovo
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau SAR China
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Myanmar (Burma)
Namibia
Nauru
Nepal
Netherlands
New Caledonia
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestinian Territories
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Réunion
Romania
Russia
Rwanda
Samoa
San Marino
São Tomé & Príncipe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Sint Maarten
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Georgia & South Sandwich Islands
South Korea
South Sudan
Spain
Sri Lanka
St. Barthélemy
St. Helena
St. Kitts & Nevis
St. Lucia
St. Martin
St. Pierre & Miquelon
St. Vincent & Grenadines
Sudan
Suriname
Svalbard & Jan Mayen
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timor-Leste
Togo
Tokelau
Tonga
Trinidad & Tobago
Tristan da Cunha
Tunisia
Turkey
Turkmenistan
Turks & Caicos Islands
Tuvalu
U.S. Outlying Islands
U.S. Virgin Islands
Uganda
Ukraine
United Arab Emirates
United Kingdom
United Nations
United States
Uruguay
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis & Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
<div class="form-group">
<label for="demo_overview">Select one or more countries</label>
<select id="demo_overview" class="form-control" data-role="select-dropdown">
<!-- options -->
</select>
</div>
Select one or more countries
Afghanistan
Åland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antarctica
Antigua & Barbuda
Argentina
Armenia
Aruba
Ascension Island
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia & Herzegovina
Botswana
Brazil
British Indian Ocean Territory
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burundi
Cambodia
Cameroon
Canada
Canary Islands
Cape Verde
Caribbean Netherlands
Cayman Islands
Central African Republic
Ceuta & Melilla
Chad
Chile
China
Christmas Island
Cocos (Keeling) Islands
Colombia
Comoros
Congo - Brazzaville
Congo - Kinshasa
Cook Islands
Costa Rica
Côte d’Ivoire
Croatia
Cuba
Curaçao
Cyprus
Czechia
Denmark
Diego Garcia
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
Equatorial Guinea
Eritrea
Estonia
Ethiopia
Eurozone
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Southern Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guernsey
Guinea
Guinea-Bissau
Guyana
Haiti
Honduras
Hong Kong SAR China
Hungary
Iceland
India
Indonesia
Iran
Iraq
Ireland
Isle of Man
Israel
Italy
Jamaica
Japan
Jersey
Jordan
Kazakhstan
Kenya
Kiribati
Kosovo
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau SAR China
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Myanmar (Burma)
Namibia
Nauru
Nepal
Netherlands
New Caledonia
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestinian Territories
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Réunion
Romania
Russia
Rwanda
Samoa
San Marino
São Tomé & Príncipe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Sint Maarten
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Georgia & South Sandwich Islands
South Korea
South Sudan
Spain
Sri Lanka
St. Barthélemy
St. Helena
St. Kitts & Nevis
St. Lucia
St. Martin
St. Pierre & Miquelon
St. Vincent & Grenadines
Sudan
Suriname
Svalbard & Jan Mayen
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timor-Leste
Togo
Tokelau
Tonga
Trinidad & Tobago
Tristan da Cunha
Tunisia
Turkey
Turkmenistan
Turks & Caicos Islands
Tuvalu
U.S. Outlying Islands
U.S. Virgin Islands
Uganda
Ukraine
United Arab Emirates
United Kingdom
United Nations
United States
Uruguay
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis & Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
<div class="form-group">
<label for="demo_overview">Select one or more countries</label>
<select id="demo_overview" class="form-control" data-role="select-dropdown" multiple>
<!-- options -->
</select>
</div>
An example of a minimal configuration. A profile: minimal
option is offered as a shortcut that sets a range of options to disable search, disable badges and remove any extra controls.
Select a food
Apples
Bananas
Beef
Chicken
Condensed milk
Dark chocolate
Dried bananas
Eggs
Ice cream
Milk
Milk chocolate
Monosodium Glutamate
Starfruit
Strawberries
<div class="form-group">
<label for="demo_overview_minimal">Select a food</label>
<select id="demo_overview_minimal" class="form-control" data-role="select-dropdown" data-profile="minimal">
<!-- options -->
</select>
</div>
An example of a minimal configuration on a <select multiselect>
element. Individual configuration options are set in this example rather than using the profile: minimal
shortcut.
Select a food
Apples
Bananas
Beef
Chicken
Condensed milk
Dark chocolate
Dried bananas
Eggs
Ice cream
Milk
Milk chocolate
Monosodium Glutamate
Starfruit
Strawberries
<div class="form-group">
<label for="demo_overview_minimal_multiselect">Select a food</label>
<select id="demo_overview_minimal_multiselect" class="form-control">
<!-- options -->
</select>
</div>
<script>
$(document).ready(function(){
$("#demo_multiselect").selectDropdown({
'search': false,
'badges': false,
'deselectAll': false,
'selectAll': false,
'showSelected': false
});
});
</script>
An example to demonstrate available options. For a full list of options, consult the options documentation .
Select one or more countries
Afghanistan
Åland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antarctica
Antigua & Barbuda
Argentina
Armenia
Aruba
Ascension Island
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia & Herzegovina
Botswana
Brazil
British Indian Ocean Territory
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burundi
Cambodia
Cameroon
Canada
Canary Islands
Cape Verde
Caribbean Netherlands
Cayman Islands
Central African Republic
Ceuta & Melilla
Chad
Chile
China
Christmas Island
Cocos (Keeling) Islands
Colombia
Comoros
Congo - Brazzaville
Congo - Kinshasa
Cook Islands
Costa Rica
Côte d’Ivoire
Croatia
Cuba
Curaçao
Cyprus
Czechia
Denmark
Diego Garcia
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
Equatorial Guinea
Eritrea
Estonia
Ethiopia
Eurozone
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Southern Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guernsey
Guinea
Guinea-Bissau
Guyana
Haiti
Honduras
Hong Kong SAR China
Hungary
Iceland
India
Indonesia
Iran
Iraq
Ireland
Isle of Man
Israel
Italy
Jamaica
Japan
Jersey
Jordan
Kazakhstan
Kenya
Kiribati
Kosovo
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau SAR China
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Myanmar (Burma)
Namibia
Nauru
Nepal
Netherlands
New Caledonia
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestinian Territories
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Réunion
Romania
Russia
Rwanda
Samoa
San Marino
São Tomé & Príncipe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Sint Maarten
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Georgia & South Sandwich Islands
South Korea
South Sudan
Spain
Sri Lanka
St. Barthélemy
St. Helena
St. Kitts & Nevis
St. Lucia
St. Martin
St. Pierre & Miquelon
St. Vincent & Grenadines
Sudan
Suriname
Svalbard & Jan Mayen
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timor-Leste
Togo
Tokelau
Tonga
Trinidad & Tobago
Tristan da Cunha
Tunisia
Turkey
Turkmenistan
Turks & Caicos Islands
Tuvalu
U.S. Outlying Islands
U.S. Virgin Islands
Uganda
Ukraine
United Arab Emirates
United Kingdom
United Nations
United States
Uruguay
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis & Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
<div class="form-group">
<label for="demo_overview_icons_badges">Select one or more countries</label>
<select id="demo_overview_example" class="form-control" multiple>
<!-- options -->
</select>
</div>
<script>
$(document).ready(function(){
$("#demo_multiselect").selectDropdown({
'maxListLength': 4,
'badges': false,
'selectButtons' : true,
'htmlDeselectAll': '<svg class="ion"><use xlink:href="#ion-close-circled"></use></svg>',
'htmlSelectAll': '<svg class="ion"><use xlink:href="#ion-checkmark-circled"></use></svg>'
});
});
</script>
In this example, the following options have been set.
maxListLength is set to 4
, adding up to 4 comma separated selected options to the button text. For 5 or more selections, the button text reverts to %count_selected% selected
.
badges are disabled for a more compact mutliselect.
selectButtons is set to true
, which transforms the 'Deselect all' and 'Select all' dropdown options into input group buttons.
htmlDeselectAll
and htmlSelectAll
contain SVG icons. Bootstrap does not ship with an icon framework by default, so some integration may be required. In this example, SCSS/CSS has been applied to make SVG icons work (height, width, fill) within buttons and badges.