Build a Dynamic dSelect Bootstrap 4 Countries Dropdown Select Box in PHP & MySQL in Javascript

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

npm install @jarstone/dselect

1	npm install @jarstone/dselect

And also we can include the library css and javascript as shown below

<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>

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

<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>

<option value="chrome">Chrome</option>

<option value="firefox">Firefox</option>

<option value="safari">Safari</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

dselect(document.querySelector('#dselect-example'))

1	dselect(document.querySelector('#dselect-example'))

Adding the Options to Select Box

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)

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

<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>

...

</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

CREATE DATABASE testing;

1	CREATE DATABASE testing;

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;

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

<?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">&nbsp;</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">&nbsp;</div>
            </div>      
            <br />
            <br />
        </div>
    </body>
</html>

<script>

    var select_box_element = document.querySelector('#select_box');

    dselect(select_box_element, {
        search: true
    });

</script>

<?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>

<head>

<title>Bootstrap 5 Select Dropdown with Search Box using JavaScript with PHP</title>

</head>

<body>

<h1 class="mt-2 mb-3 text-center text-primary">Bootstrap 5 Select Dropdown with Search Box using JavaScript with PHP</h1>

<option value="">Select Country</option>

<?php

foreach($result as $row)

{

echo '<option value="'.$row["country_name"].'">'.$row["country_name"].'</option>';

}

</select>

</div>

</div>

<br />

</div>

</body>

</html>

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.