Welcome folks today in this blog post we will be building a dynamic dSelect bootstrap 4 countries dropdown select box in php and mysql. All the source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file inside the root directory. First of all we will be including the dselect
library cdn of css and js as shown below
Installation
You can install this module using the npm
module as shown below
1 |
npm install @jarstone/dselect |
And also we can include the library css and javascript as shown below
1 2 |
<link rel="stylesheet" href="https://unpkg.com/@jarstone/dselect/dist/css/dselect.css"> <script src="https://unpkg.com/@jarstone/dselect/dist/js/dselect.js"></script> |
Features
There are many types of select box available are:
- Placeholder
- Multiple
- Search
- Creatable
- Clearable
- Sizing
- Validation
Usage/Examples
1 2 3 4 5 6 7 8 |
<select class="form-select" id="dselect-example"> <option value="chrome">Chrome</option> <option value="firefox">Firefox</option> <option value="safari">Safari</option> <option value="edge">Edge</option> <option value="opera">Opera</option> <option value="brave">Brave</option> </select> |
And now we will be attaching the dselect
library to the DOM as shown below
1 |
dselect(document.querySelector('#dselect-example')) |
Adding the Options to Select Box
1 2 3 4 5 6 7 8 |
const config = { search: false, // Toggle search feature. Default: false creatable: false, // Creatable selection. Default: false clearable: false, // Clearable selection. Default: false maxHeight: '360px', // Max height for showing scrollbar. Default: 360px size: '', // Can be "sm" or "lg". Default '' } dselect(document.querySelector('#dselect-example'), config) |
Now as you can see above we are attaching the different config options to the dselect select box element.
Adding the Options Using data-dselect Attribute
1 2 3 |
<select data-dselect-search="true" data-dselect-creatable="true" data-dselect-clearable="true" data-dselect-max-height="300px" data-dselect-size="sm" class="form-select" id="dselect-example"> ... </select> |
Now we need to create the Database and the tables inside the Xammp Control Panel. First of all you need to start the apache server and mysql database
First of all create the database called testing as shown below
1 |
CREATE DATABASE testing; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 |
use testing; CREATE TABLE `apps_countries` ( `id` int(11) NOT NULL, `country_code` varchar(2) NOT NULL DEFAULT '', `country_name` varchar(100) NOT NULL DEFAULT '' ) ENGINE=MyISAM DEFAULT CHARSET=utf8; -- -- Dumping data for table `apps_countries` -- INSERT INTO `apps_countries` (`id`, `country_code`, `country_name`) VALUES (1, 'AF', 'Afghanistan'), (2, 'AL', 'Albania'), (3, 'DZ', 'Algeria'), (4, 'DS', 'American Samoa'), (5, 'AD', 'Andorra'), (6, 'AO', 'Angola'), (7, 'AI', 'Anguilla'), (8, 'AQ', 'Antarctica'), (9, 'AG', 'Antigua and Barbuda'), (10, 'AR', 'Argentina'), (11, 'AM', 'Armenia'), (12, 'AW', 'Aruba'), (13, 'AU', 'Australia'), (14, 'AT', 'Austria'), (15, 'AZ', 'Azerbaijan'), (16, 'BS', 'Bahamas'), (17, 'BH', 'Bahrain'), (18, 'BD', 'Bangladesh'), (19, 'BB', 'Barbados'), (20, 'BY', 'Belarus'), (21, 'BE', 'Belgium'), (22, 'BZ', 'Belize'), (23, 'BJ', 'Benin'), (24, 'BM', 'Bermuda'), (25, 'BT', 'Bhutan'), (26, 'BO', 'Bolivia'), (27, 'BA', 'Bosnia and Herzegovina'), (28, 'BW', 'Botswana'), (29, 'BV', 'Bouvet Island'), (30, 'BR', 'Brazil'), (31, 'IO', 'British Indian Ocean Territory'), (32, 'BN', 'Brunei Darussalam'), (33, 'BG', 'Bulgaria'), (34, 'BF', 'Burkina Faso'), (35, 'BI', 'Burundi'), (36, 'KH', 'Cambodia'), (37, 'CM', 'Cameroon'), (38, 'CA', 'Canada'), (39, 'CV', 'Cape Verde'), (40, 'KY', 'Cayman Islands'), (41, 'CF', 'Central African Republic'), (42, 'TD', 'Chad'), (43, 'CL', 'Chile'), (44, 'CN', 'China'), (45, 'CX', 'Christmas Island'), (46, 'CC', 'Cocos (Keeling) Islands'), (47, 'CO', 'Colombia'), (48, 'KM', 'Comoros'), (49, 'CG', 'Congo'), (50, 'CK', 'Cook Islands'), (51, 'CR', 'Costa Rica'), (52, 'HR', 'Croatia (Hrvatska)'), (53, 'CU', 'Cuba'), (54, 'CY', 'Cyprus'), (55, 'CZ', 'Czech Republic'), (56, 'DK', 'Denmark'), (57, 'DJ', 'Djibouti'), (58, 'DM', 'Dominica'), (59, 'DO', 'Dominican Republic'), (60, 'TP', 'East Timor'), (61, 'EC', 'Ecuador'), (62, 'EG', 'Egypt'), (63, 'SV', 'El Salvador'), (64, 'GQ', 'Equatorial Guinea'), (65, 'ER', 'Eritrea'), (66, 'EE', 'Estonia'), (67, 'ET', 'Ethiopia'), (68, 'FK', 'Falkland Islands (Malvinas)'), (69, 'FO', 'Faroe Islands'), (70, 'FJ', 'Fiji'), (71, 'FI', 'Finland'), (72, 'FR', 'France'), (73, 'FX', 'France, Metropolitan'), (74, 'GF', 'French Guiana'), (75, 'PF', 'French Polynesia'), (76, 'TF', 'French Southern Territories'), (77, 'GA', 'Gabon'), (78, 'GM', 'Gambia'), (79, 'GE', 'Georgia'), (80, 'DE', 'Germany'), (81, 'GH', 'Ghana'), (82, 'GI', 'Gibraltar'), (83, 'GK', 'Guernsey'), (84, 'GR', 'Greece'), (85, 'GL', 'Greenland'), (86, 'GD', 'Grenada'), (87, 'GP', 'Guadeloupe'), (88, 'GU', 'Guam'), (89, 'GT', 'Guatemala'), (90, 'GN', 'Guinea'), (91, 'GW', 'Guinea-Bissau'), (92, 'GY', 'Guyana'), (93, 'HT', 'Haiti'), (94, 'HM', 'Heard and Mc Donald Islands'), (95, 'HN', 'Honduras'), (96, 'HK', 'Hong Kong'), (97, 'HU', 'Hungary'), (98, 'IS', 'Iceland'), (99, 'IN', 'India'), (100, 'IM', 'Isle of Man'), (101, 'ID', 'Indonesia'), (102, 'IR', 'Iran (Islamic Republic of)'), (103, 'IQ', 'Iraq'), (104, 'IE', 'Ireland'), (105, 'IL', 'Israel'), (106, 'IT', 'Italy'), (107, 'CI', 'Ivory Coast'), (108, 'JE', 'Jersey'), (109, 'JM', 'Jamaica'), (110, 'JP', 'Japan'), (111, 'JO', 'Jordan'), (112, 'KZ', 'Kazakhstan'), (113, 'KE', 'Kenya'), (114, 'KI', 'Kiribati'), (115, 'KP', 'Korea, Democratic People\'s Republic of'), (116, 'KR', 'Korea, Republic of'), (117, 'XK', 'Kosovo'), (118, 'KW', 'Kuwait'), (119, 'KG', 'Kyrgyzstan'), (120, 'LA', 'Lao People\'s Democratic Republic'), (121, 'LV', 'Latvia'), (122, 'LB', 'Lebanon'), (123, 'LS', 'Lesotho'), (124, 'LR', 'Liberia'), (125, 'LY', 'Libyan Arab Jamahiriya'), (126, 'LI', 'Liechtenstein'), (127, 'LT', 'Lithuania'), (128, 'LU', 'Luxembourg'), (129, 'MO', 'Macau'), (130, 'MK', 'Macedonia'), (131, 'MG', 'Madagascar'), (132, 'MW', 'Malawi'), (133, 'MY', 'Malaysia'), (134, 'MV', 'Maldives'), (135, 'ML', 'Mali'), (136, 'MT', 'Malta'), (137, 'MH', 'Marshall Islands'), (138, 'MQ', 'Martinique'), (139, 'MR', 'Mauritania'), (140, 'MU', 'Mauritius'), (141, 'TY', 'Mayotte'), (142, 'MX', 'Mexico'), (143, 'FM', 'Micronesia, Federated States of'), (144, 'MD', 'Moldova, Republic of'), (145, 'MC', 'Monaco'), (146, 'MN', 'Mongolia'), (147, 'ME', 'Montenegro'), (148, 'MS', 'Montserrat'), (149, 'MA', 'Morocco'), (150, 'MZ', 'Mozambique'), (151, 'MM', 'Myanmar'), (152, 'NA', 'Namibia'), (153, 'NR', 'Nauru'), (154, 'NP', 'Nepal'), (155, 'NL', 'Netherlands'), (156, 'AN', 'Netherlands Antilles'), (157, 'NC', 'New Caledonia'), (158, 'NZ', 'New Zealand'), (159, 'NI', 'Nicaragua'), (160, 'NE', 'Niger'), (161, 'NG', 'Nigeria'), (162, 'NU', 'Niue'), (163, 'NF', 'Norfolk Island'), (164, 'MP', 'Northern Mariana Islands'), (165, 'NO', 'Norway'), (166, 'OM', 'Oman'), (167, 'PK', 'Pakistan'), (168, 'PW', 'Palau'), (169, 'PS', 'Palestine'), (170, 'PA', 'Panama'), (171, 'PG', 'Papua New Guinea'), (172, 'PY', 'Paraguay'), (173, 'PE', 'Peru'), (174, 'PH', 'Philippines'), (175, 'PN', 'Pitcairn'), (176, 'PL', 'Poland'), (177, 'PT', 'Portugal'), (178, 'PR', 'Puerto Rico'), (179, 'QA', 'Qatar'), (180, 'RE', 'Reunion'), (181, 'RO', 'Romania'), (182, 'RU', 'Russian Federation'), (183, 'RW', 'Rwanda'), (184, 'KN', 'Saint Kitts and Nevis'), (185, 'LC', 'Saint Lucia'), (186, 'VC', 'Saint Vincent and the Grenadines'), (187, 'WS', 'Samoa'), (188, 'SM', 'San Marino'), (189, 'ST', 'Sao Tome and Principe'), (190, 'SA', 'Saudi Arabia'), (191, 'SN', 'Senegal'), (192, 'RS', 'Serbia'), (193, 'SC', 'Seychelles'), (194, 'SL', 'Sierra Leone'), (195, 'SG', 'Singapore'), (196, 'SK', 'Slovakia'), (197, 'SI', 'Slovenia'), (198, 'SB', 'Solomon Islands'), (199, 'SO', 'Somalia'), (200, 'ZA', 'South Africa'), (201, 'GS', 'South Georgia South Sandwich Islands'), (202, 'ES', 'Spain'), (203, 'LK', 'Sri Lanka'), (204, 'SH', 'St. Helena'), (205, 'PM', 'St. Pierre and Miquelon'), (206, 'SD', 'Sudan'), (207, 'SR', 'Suriname'), (208, 'SJ', 'Svalbard and Jan Mayen Islands'), (209, 'SZ', 'Swaziland'), (210, 'SE', 'Sweden'), (211, 'CH', 'Switzerland'), (212, 'SY', 'Syrian Arab Republic'), (213, 'TW', 'Taiwan'), (214, 'TJ', 'Tajikistan'), (215, 'TZ', 'Tanzania, United Republic of'), (216, 'TH', 'Thailand'), (217, 'TG', 'Togo'), (218, 'TK', 'Tokelau'), (219, 'TO', 'Tonga'), (220, 'TT', 'Trinidad and Tobago'), (221, 'TN', 'Tunisia'), (222, 'TR', 'Turkey'), (223, 'TM', 'Turkmenistan'), (224, 'TC', 'Turks and Caicos Islands'), (225, 'TV', 'Tuvalu'), (226, 'UG', 'Uganda'), (227, 'UA', 'Ukraine'), (228, 'AE', 'United Arab Emirates'), (229, 'GB', 'United Kingdom'), (230, 'US', 'United States'), (231, 'UM', 'United States minor outlying islands'), (232, 'UY', 'Uruguay'), (233, 'UZ', 'Uzbekistan'), (234, 'VU', 'Vanuatu'), (235, 'VA', 'Vatican City State'), (236, 'VE', 'Venezuela'), (237, 'VN', 'Vietnam'), (238, 'VG', 'Virgin Islands (British)'), (239, 'VI', 'Virgin Islands (U.S.)'), (240, 'WF', 'Wallis and Futuna Islands'), (241, 'EH', 'Western Sahara'), (242, 'YE', 'Yemen'), (243, 'ZR', 'Zaire'), (244, 'ZM', 'Zambia'), (245, 'ZW', 'Zimbabwe'); -- -- Indexes for dumped tables -- -- -- Indexes for table `apps_countries` -- ALTER TABLE `apps_countries` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `apps_countries` -- ALTER TABLE `apps_countries` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=246; |
And now we will be populating all the countries which are available inside the mysql table to the select box. And for this we will be writing the php file as shown below
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<?php //index.php $connect = new PDO("mysql:host=localhost;dbname=testing", "root", ""); $query = " SELECT country_name FROM apps_countries ORDER BY country_name ASC "; $result = $connect->query($query); ?> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <!-- Latest compiled and minified CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/@jarstone/dselect/dist/css/dselect.css"> <script src="https://unpkg.com/@jarstone/dselect/dist/js/dselect.js"></script> <title>Bootstrap 5 Select Dropdown with Search Box using JavaScript with PHP</title> </head> <body> <div class="container"> <h1 class="mt-2 mb-3 text-center text-primary">Bootstrap 5 Select Dropdown with Search Box using JavaScript with PHP</h1> <div class="row"> <div class="col-md-3"> </div> <div class="col-md-6"> <select name="select_box" class="form-select" id="select_box"> <option value="">Select Country</option> <?php foreach($result as $row) { echo '<option value="'.$row["country_name"].'">'.$row["country_name"].'</option>'; } ?> </select> </div> <div class="col-md-3"> </div> </div> <br /> <br /> </div> </body> </html> <script> var select_box_element = document.querySelector('#select_box'); dselect(select_box_element, { search: true }); </script> |
As you can see at the top we are fetching all the records from the table using the select statement and then we are populating all the records inside the select box element. And also we are initializing the dselect library to the select box dom element. And also we are including the bootstrap css and javascript cdn.