/
with-jquery.html
455 lines (419 loc) · 31.9 KB
/
with-jquery.html
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
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MsDropdown Example</title>
<meta name="description" content="Convert your SELECT to image dropdown">
<meta name="author" content="Marghoob Suleman">
<meta property="og:title" content="MsDropdown Example">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.marghoobsuleman/image-dropdown">
<meta property="og:description" content="Convert your SELECT to image dropdown">
<meta property="og:image" content="image-dropdown.png">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="./dist/css/dd.css?v=4.0">
<link rel="stylesheet" type="text/css" href="./dist/css/flags.css?v=1.0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
font-size: 12px;
font-family: Arial;
}
.header, .footer {
padding: 50px 0 20px;
}
.highlight{background-color: lightyellow}
.strong{font-weight: bold}
</style>
</head>
<body>
<div class="header">
<h1><a href="https://www.marghoobsuleman.com/image-dropdown">msDropdown</a></h1>
</div>
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
<select id="multigames" name="games[]" is="ms-dropdown" multiple required>
<option value="" selected>Please select one</option>
<option data-image="./dist/images/icons/icon_email.gif" value="email">Email</option>
<option data-image="./dist/images/icons/icon_faq.gif" value="faq">FAQ</option>
<option data-image="./dist/images/icons/icon_games.gif" value="games">Games</option>
<option data-image="./dist/images/icons/icon_music.gif" value="music">Music</option>
<option data-image="./dist/images/icons/icon_phone.gif" value="phone">Phone</option>
<option data-image="./dist/images/icons/icon_sales.gif" value="graph">Graph</option>
<option data-image="./dist/images/icons/icon_secure.gif" value="secured">Secured</option>
<option data-image="./dist/images/icons/icon_video.gif" value="video">Video</option>
<option data-image="./dist/images/icons/icon_cd.gif" name="cd" value="cd">CD</option>
</select>
<select is="ms-dropdown" id="car_group" name="car_group">
<optgroup label="Mercedes Benz">
<option>Mercedes-Benz GLA</option>
<option>Mercedes-Benz S-Class</option>
<option>Mercedes-Benz E-Class</option>
<option>Mercedes-Benz GLS</option>
</optgroup>
<optgroup label="Jaguar">
<option>Jaguar F-TYPE</option>
<option selected>Jaguar XE</option>
<option>Jaguar F-Pace</option>
<option>Jaguar I-Pace</option>
<option>Jaguar XF</option>
</optgroup>
</select>
<select id="tech" name="tech" is="ms-dropdown" data-enable-checkbox="true">
<option data-image="./dist/images/icons/icon_email.gif" value="email">Email</option>
<option data-image="./dist/images/icons/icon_faq.gif" value="faq">FAQ</option>
<option data-image="./dist/images/icons/icon_games.gif" selected value="games">Games</option>
<option data-image="./dist/images/icons/icon_music.gif" value="music">Music</option>
<option data-image="./dist/images/icons/icon_phone.gif" value="phone">Phone</option>
<option data-image="./dist/images/icons/icon_sales.gif" value="graph">Graph</option>
<option data-image="./dist/images/icons/icon_secure.gif" value="secured">Secured</option>
<option data-image="./dist/images/icons/icon_video.gif" value="video">Video</option>
<option data-image="./dist/images/icons/icon_cd.gif" name="cd" value="cd">CD</option>
</select>
<select id="payments" name="payments" is="ms-dropdown" required>
<option value="" data-description="Choos your payment gateway">Payment Gateway</option>
<option value="amex" data-image="./dist/images/icons/Amex-56.png" data-description="My life. My card...">Amex</option>
<option value="Discover" data-image="./dist/images/icons/Discover-56.png" data-description="It pays to Discover...">Discover</option>
<option value="Mastercard" data-image="./dist/images/icons/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
<option value="cash" data-image="./dist/images/icons/Cash-56.png" data-description="Pay at your doorstep...">Cash on devlivery</option>
<option value="Visa" data-image="./dist/images/icons/Visa-56.png" data-description="All you need...">Visa</option>
<option value="Paypal" data-image="./dist/images/icons/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
</select>
<select name="countries" id="countries" is="ms-dropdown" data-child-height="315">
<option value='ad' data-image-css="flag ad" data-title="Andorra">Andorra</option>
<option value='ae' data-image-css="flag ae" data-title="United Arab Emirates">United Arab Emirates</option>
<option value='af' data-image-css="flag af" data-title="Afghanistan">Afghanistan</option>
<option value='ag' data-image-css="flag ag" data-title="Antigua and Barbuda">Antigua and Barbuda</option>
<option value='ai' data-image-css="flag ai" data-title="Anguilla">Anguilla</option>
<option value='al' data-image-css="flag al" data-title="Albania">Albania</option>
<option value='am' data-image-css="flag am" data-title="Armenia">Armenia</option>
<option value='an' data-image-css="flag an" data-title="Netherlands Antilles">Netherlands Antilles</option>
<option value='ao' data-image-css="flag ao" data-title="Angola">Angola</option>
<option value='aq' data-image-css="flag aq" data-title="Antarctica">Antarctica</option>
<option value='ar' data-image-css="flag ar" data-title="Argentina">Argentina</option>
<option value='as' data-image-css="flag as" data-title="American Samoa">American Samoa</option>
<option value='at' data-image-css="flag at" data-title="Austria">Austria</option>
<option value='au' data-image-css="flag au" data-title="Australia">Australia</option>
<option value='aw' data-image-css="flag aw" data-title="Aruba">Aruba</option>
<option value='ax' data-image-css="flag ax" data-title="Aland Islands">Aland Islands</option>
<option value='az' data-image-css="flag az" data-title="Azerbaijan">Azerbaijan</option>
<option value='ba' data-image-css="flag ba" data-title="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value='bb' data-image-css="flag bb" data-title="Barbados">Barbados</option>
<option value='bd' data-image-css="flag bd" data-title="Bangladesh">Bangladesh</option>
<option value='be' data-image-css="flag be" data-title="Belgium">Belgium</option>
<option value='bf' data-image-css="flag bf" data-title="Burkina Faso">Burkina Faso</option>
<option value='bg' data-image-css="flag bg" data-title="Bulgaria">Bulgaria</option>
<option value='bh' data-image-css="flag bh" data-title="Bahrain">Bahrain</option>
<option value='bi' data-image-css="flag bi" data-title="Burundi">Burundi</option>
<option value='bj' data-image-css="flag bj" data-title="Benin">Benin</option>
<option value='bm' data-image-css="flag bm" data-title="Bermuda">Bermuda</option>
<option value='bn' data-image-css="flag bn" data-title="Brunei Darussalam">Brunei Darussalam</option>
<option value='bo' data-image-css="flag bo" data-title="Bolivia">Bolivia</option>
<option value='br' data-image-css="flag br" data-title="Brazil">Brazil</option>
<option value='bs' data-image-css="flag bs" data-title="Bahamas">Bahamas</option>
<option value='bt' data-image-css="flag bt" data-title="Bhutan">Bhutan</option>
<option value='bv' data-image-css="flag bv" data-title="Bouvet Island">Bouvet Island</option>
<option value='bw' data-image-css="flag bw" data-title="Botswana">Botswana</option>
<option value='by' data-image-css="flag by" data-title="Belarus">Belarus</option>
<option value='bz' data-image-css="flag bz" data-title="Belize">Belize</option>
<option value='ca' data-image-css="flag ca" data-title="Canada">Canada</option>
<option value='cc' data-image-css="flag cc" data-title="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value='cd' data-image-css="flag cd" data-title="Democratic Republic of the Congo">Democratic Republic of the Congo</option>
<option value='cf' data-image-css="flag cf" data-title="Central African Republic">Central African Republic</option>
<option value='cg' data-image-css="flag cg" data-title="Congo">Congo</option>
<option value='ch' data-image-css="flag ch" data-title="Switzerland">Switzerland</option>
<option value='ci' data-image-css="flag ci" data-title="Cote D'Ivoire (Ivory Coast)">Cote D'Ivoire (Ivory Coast)</option>
<option value='ck' data-image-css="flag ck" data-title="Cook Islands">Cook Islands</option>
<option value='cl' data-image-css="flag cl" data-title="Chile">Chile</option>
<option value='cm' data-image-css="flag cm" data-title="Cameroon">Cameroon</option>
<option value='cn' data-image-css="flag cn" data-title="China">China</option>
<option value='co' data-image-css="flag co" data-title="Colombia">Colombia</option>
<option value='cr' data-image-css="flag cr" data-title="Costa Rica">Costa Rica</option>
<option value='cs' data-image-css="flag cs" data-title="Serbia and Montenegro">Serbia and Montenegro</option>
<option value='cu' data-image-css="flag cu" data-title="Cuba">Cuba</option>
<option value='cv' data-image-css="flag cv" data-title="Cape Verde">Cape Verde</option>
<option value='cx' data-image-css="flag cx" data-title="Christmas Island">Christmas Island</option>
<option value='cy' data-image-css="flag cy" data-title="Cyprus">Cyprus</option>
<option value='cz' data-image-css="flag cz" data-title="Czech Republic">Czech Republic</option>
<option value='de' data-image-css="flag de" data-title="Germany">Germany</option>
<option value='dj' data-image-css="flag dj" data-title="Djibouti">Djibouti</option>
<option value='dk' data-image-css="flag dk" data-title="Denmark">Denmark</option>
<option value='dm' data-image-css="flag dm" data-title="Dominica">Dominica</option>
<option value='do' data-image-css="flag do" data-title="Dominican Republic">Dominican Republic</option>
<option value='dz' data-image-css="flag dz" data-title="Algeria">Algeria</option>
<option value='ec' data-image-css="flag ec" data-title="Ecuador">Ecuador</option>
<option value='ee' data-image-css="flag ee" data-title="Estonia">Estonia</option>
<option value='eg' data-image-css="flag eg" data-title="Egypt">Egypt</option>
<option value='eh' data-image-css="flag eh" data-title="Western Sahara">Western Sahara</option>
<option value='er' data-image-css="flag er" data-title="Eritrea">Eritrea</option>
<option value='es' data-image-css="flag es" data-title="Spain">Spain</option>
<option value='et' data-image-css="flag et" data-title="Ethiopia">Ethiopia</option>
<option value='fi' data-image-css="flag fi" data-title="Finland">Finland</option>
<option value='fj' data-image-css="flag fj" data-title="Fiji">Fiji</option>
<option value='fk' data-image-css="flag fk" data-title="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
<option value='fm' data-image-css="flag fm" data-title="Federated States of Micronesia">Federated States of Micronesia</option>
<option value='fo' data-image-css="flag fo" data-title="Faroe Islands">Faroe Islands</option>
<option value='fr' data-image-css="flag fr" data-title="France">France</option>
<option value='fx' data-image-css="flag fx" data-title="France, Metropolitan">France, Metropolitan</option>
<option value='ga' data-image-css="flag ga" data-title="Gabon">Gabon</option>
<option value='gb' data-image-css="flag gb" data-title="Great Britain (UK)">Great Britain (UK)</option>
<option value='gd' data-image-css="flag gd" data-title="Grenada">Grenada</option>
<option value='ge' data-image-css="flag ge" data-title="Georgia">Georgia</option>
<option value='gf' data-image-css="flag gf" data-title="French Guiana">French Guiana</option>
<option value='gh' data-image-css="flag gh" data-title="Ghana">Ghana</option>
<option value='gi' data-image-css="flag gi" data-title="Gibraltar">Gibraltar</option>
<option value='gl' data-image-css="flag gl" data-title="Greenland">Greenland</option>
<option value='gm' data-image-css="flag gm" data-title="Gambia">Gambia</option>
<option value='gn' data-image-css="flag gn" data-title="Guinea">Guinea</option>
<option value='gp' data-image-css="flag gp" data-title="Guadeloupe">Guadeloupe</option>
<option value='gq' data-image-css="flag gq" data-title="Equatorial Guinea">Equatorial Guinea</option>
<option value='gr' data-image-css="flag gr" data-title="Greece">Greece</option>
<option value='gs' data-image-css="flag gs" data-title="S. Georgia and S. Sandwich Islands">S. Georgia and S. Sandwich Islands</option>
<option value='gt' data-image-css="flag gt" data-title="Guatemala">Guatemala</option>
<option value='gu' data-image-css="flag gu" data-title="Guam">Guam</option>
<option value='gw' data-image-css="flag gw" data-title="Guinea-Bissau">Guinea-Bissau</option>
<option value='gy' data-image-css="flag gy" data-title="Guyana">Guyana</option>
<option value='hk' data-image-css="flag hk" data-title="Hong Kong">Hong Kong</option>
<option value='hm' data-image-css="flag hm" data-title="Heard Island and McDonald Islands">Heard Island and McDonald Islands</option>
<option value='hn' data-image-css="flag hn" data-title="Honduras">Honduras</option>
<option value='hr' data-image-css="flag hr" data-title="Croatia (Hrvatska)">Croatia (Hrvatska)</option>
<option value='ht' data-image-css="flag ht" data-title="Haiti">Haiti</option>
<option value='hu' data-image-css="flag hu" data-title="Hungary">Hungary</option>
<option value='id' data-image-css="flag id" data-title="Indonesia">Indonesia</option>
<option value='ie' data-image-css="flag ie" data-title="Ireland">Ireland</option>
<option value='il' data-image-css="flag il" data-title="Israel">Israel</option>
<option value='in' data-image-css="flag in" data-title="India">India</option>
<option value='io' data-image-css="flag io" data-title="British Indian Ocean Territory">British Indian Ocean Territory</option>
<option value='iq' data-image-css="flag iq" data-title="Iraq">Iraq</option>
<option value='ir' data-image-css="flag ir" data-title="Iran">Iran</option>
<option value='is' data-image-css="flag is" data-title="Iceland">Iceland</option>
<option value='it' data-image-css="flag it" data-title="Italy">Italy</option>
<option value='jm' data-image-css="flag jm" data-title="Jamaica">Jamaica</option>
<option value='jo' data-image-css="flag jo" data-title="Jordan">Jordan</option>
<option value='jp' data-image-css="flag jp" data-title="Japan">Japan</option>
<option value='ke' data-image-css="flag ke" data-title="Kenya">Kenya</option>
<option value='kg' data-image-css="flag kg" data-title="Kyrgyzstan">Kyrgyzstan</option>
<option value='kh' data-image-css="flag kh" data-title="Cambodia">Cambodia</option>
<option value='ki' data-image-css="flag ki" data-title="Kiribati">Kiribati</option>
<option value='km' data-image-css="flag km" data-title="Comoros">Comoros</option>
<option value='kn' data-image-css="flag kn" data-title="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value='kp' data-image-css="flag kp" data-title="Korea (North)">Korea (North)</option>
<option value='kr' data-image-css="flag kr" data-title="Korea (South)">Korea (South)</option>
<option value='kw' data-image-css="flag kw" data-title="Kuwait">Kuwait</option>
<option value='ky' data-image-css="flag ky" data-title="Cayman Islands">Cayman Islands</option>
<option value='kz' data-image-css="flag kz" data-title="Kazakhstan">Kazakhstan</option>
<option value='la' data-image-css="flag la" data-title="Laos">Laos</option>
<option value='lb' data-image-css="flag lb" data-title="Lebanon">Lebanon</option>
<option value='lc' data-image-css="flag lc" data-title="Saint Lucia">Saint Lucia</option>
<option value='li' data-image-css="flag li" data-title="Liechtenstein">Liechtenstein</option>
<option value='lk' data-image-css="flag lk" data-title="Sri Lanka">Sri Lanka</option>
<option value='lr' data-image-css="flag lr" data-title="Liberia">Liberia</option>
<option value='ls' data-image-css="flag ls" data-title="Lesotho">Lesotho</option>
<option value='lt' data-image-css="flag lt" data-title="Lithuania">Lithuania</option>
<option value='lu' data-image-css="flag lu" data-title="Luxembourg">Luxembourg</option>
<option value='lv' data-image-css="flag lv" data-title="Latvia">Latvia</option>
<option value='ly' data-image-css="flag ly" data-title="Libya">Libya</option>
<option value='ma' data-image-css="flag ma" data-title="Morocco">Morocco</option>
<option value='mc' data-image-css="flag mc" data-title="Monaco">Monaco</option>
<option value='md' data-image-css="flag md" data-title="Moldova">Moldova</option>
<option value='mg' data-image-css="flag mg" data-title="Madagascar">Madagascar</option>
<option value='mh' data-image-css="flag mh" data-title="Marshall Islands">Marshall Islands</option>
<option value='mk' data-image-css="flag mk" data-title="Macedonia">Macedonia</option>
<option value='ml' data-image-css="flag ml" data-title="Mali">Mali</option>
<option value='mm' data-image-css="flag mm" data-title="Myanmar">Myanmar</option>
<option value='mn' data-image-css="flag mn" data-title="Mongolia">Mongolia</option>
<option value='mo' data-image-css="flag mo" data-title="Macao">Macao</option>
<option value='mp' data-image-css="flag mp" data-title="Northern Mariana Islands">Northern Mariana Islands</option>
<option value='mq' data-image-css="flag mq" data-title="Martinique">Martinique</option>
<option value='mr' data-image-css="flag mr" data-title="Mauritania">Mauritania</option>
<option value='ms' data-image-css="flag ms" data-title="Montserrat">Montserrat</option>
<option value='mt' data-image-css="flag mt" data-title="Malta">Malta</option>
<option value='mu' data-image-css="flag mu" data-title="Mauritius">Mauritius</option>
<option value='mv' data-image-css="flag mv" data-title="Maldives">Maldives</option>
<option value='mw' data-image-css="flag mw" data-title="Malawi">Malawi</option>
<option value='mx' data-image-css="flag mx" data-title="Mexico">Mexico</option>
<option value='my' data-image-css="flag my" data-title="Malaysia">Malaysia</option>
<option value='mz' data-image-css="flag mz" data-title="Mozambique">Mozambique</option>
<option value='na' data-image-css="flag na" data-title="Namibia">Namibia</option>
<option value='nc' data-image-css="flag nc" data-title="New Caledonia">New Caledonia</option>
<option value='ne' data-image-css="flag ne" data-title="Niger">Niger</option>
<option value='nf' data-image-css="flag nf" data-title="Norfolk Island">Norfolk Island</option>
<option value='ng' data-image-css="flag ng" data-title="Nigeria">Nigeria</option>
<option value='ni' data-image-css="flag ni" data-title="Nicaragua">Nicaragua</option>
<option value='nl' data-image-css="flag nl" data-title="Netherlands">Netherlands</option>
<option value='no' data-image-css="flag no" data-title="Norway">Norway</option>
<option value='np' data-image-css="flag np" data-title="Nepal">Nepal</option>
<option value='nr' data-image-css="flag nr" data-title="Nauru">Nauru</option>
<option value='nu' data-image-css="flag nu" data-title="Niue">Niue</option>
<option value='nz' data-image-css="flag nz" data-title="New Zealand (Aotearoa)">New Zealand (Aotearoa)</option>
<option value='om' data-image-css="flag om" data-title="Oman">Oman</option>
<option value='pa' data-image-css="flag pa" data-title="Panama">Panama</option>
<option value='pe' data-image-css="flag pe" data-title="Peru">Peru</option>
<option value='pf' data-image-css="flag pf" data-title="French Polynesia">French Polynesia</option>
<option value='pg' data-image-css="flag pg" data-title="Papua New Guinea">Papua New Guinea</option>
<option value='ph' data-image-css="flag ph" data-title="Philippines">Philippines</option>
<option value='pk' data-image-css="flag pk" data-title="Pakistan">Pakistan</option>
<option value='pl' data-image-css="flag pl" data-title="Poland">Poland</option>
<option value='pm' data-image-css="flag pm" data-title="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value='pn' data-image-css="flag pn" data-title="Pitcairn">Pitcairn</option>
<option value='pr' data-image-css="flag pr" data-title="Puerto Rico">Puerto Rico</option>
<option value='ps' data-image-css="flag ps" data-title="Palestinian Territory">Palestinian Territory</option>
<option value='pt' data-image-css="flag pt" data-title="Portugal">Portugal</option>
<option value='pw' data-image-css="flag pw" data-title="Palau">Palau</option>
<option value='py' data-image-css="flag py" data-title="Paraguay">Paraguay</option>
<option value='qa' data-image-css="flag qa" data-title="Qatar">Qatar</option>
<option value='re' data-image-css="flag re" data-title="Reunion">Reunion</option>
<option value='ro' data-image-css="flag ro" data-title="Romania">Romania</option>
<option value='ru' data-image-css="flag ru" data-title="Russian Federation">Russian Federation</option>
<option value='rw' data-image-css="flag rw" data-title="Rwanda">Rwanda</option>
<option value='sa' data-image-css="flag sa" data-title="Saudi Arabia">Saudi Arabia</option>
<option value='sb' data-image-css="flag sb" data-title="Solomon Islands">Solomon Islands</option>
<option value='sc' data-image-css="flag sc" data-title="Seychelles">Seychelles</option>
<option value='sd' data-image-css="flag sd" data-title="Sudan">Sudan</option>
<option value='se' data-image-css="flag se" data-title="Sweden">Sweden</option>
<option value='sg' data-image-css="flag sg" data-title="Singapore">Singapore</option>
<option value='sh' data-image-css="flag sh" data-title="Saint Helena">Saint Helena</option>
<option value='si' data-image-css="flag si" data-title="Slovenia">Slovenia</option>
<option value='sj' data-image-css="flag sj" data-title="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value='sk' data-image-css="flag sk" data-title="Slovakia">Slovakia</option>
<option value='sl' data-image-css="flag sl" data-title="Sierra Leone">Sierra Leone</option>
<option value='sm' data-image-css="flag sm" data-title="San Marino">San Marino</option>
<option value='sn' data-image-css="flag sn" data-title="Senegal">Senegal</option>
<option value='so' data-image-css="flag so" data-title="Somalia">Somalia</option>
<option value='sr' data-image-css="flag sr" data-title="Suriname">Suriname</option>
<option value='st' data-image-css="flag st" data-title="Sao Tome and Principe">Sao Tome and Principe</option>
<option value='su' data-image-css="flag su" data-title="USSR (former)">USSR (former)</option>
<option value='sv' data-image-css="flag sv" data-title="El Salvador">El Salvador</option>
<option value='sy' data-image-css="flag sy" data-title="Syria">Syria</option>
<option value='sz' data-image-css="flag sz" data-title="Swaziland">Swaziland</option>
<option value='tc' data-image-css="flag tc" data-title="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value='td' data-image-css="flag td" data-title="Chad">Chad</option>
<option value='tf' data-image-css="flag tf" data-title="French Southern Territories">French Southern Territories</option>
<option value='tg' data-image-css="flag tg" data-title="Togo">Togo</option>
<option value='th' data-image-css="flag th" data-title="Thailand">Thailand</option>
<option value='tj' data-image-css="flag tj" data-title="Tajikistan">Tajikistan</option>
<option value='tk' data-image-css="flag tk" data-title="Tokelau">Tokelau</option>
<option value='tl' data-image-css="flag tl" data-title="Timor-Leste">Timor-Leste</option>
<option value='tm' data-image-css="flag tm" data-title="Turkmenistan">Turkmenistan</option>
<option value='tn' data-image-css="flag tn" data-title="Tunisia">Tunisia</option>
<option value='to' data-image-css="flag to" data-title="Tonga">Tonga</option>
<option value='tp' data-image-css="flag tp" data-title="East Timor">East Timor</option>
<option value='tr' data-image-css="flag tr" data-title="Turkey">Turkey</option>
<option value='tt' data-image-css="flag tt" data-title="Trinidad and Tobago">Trinidad and Tobago</option>
<option value='tv' data-image-css="flag tv" data-title="Tuvalu">Tuvalu</option>
<option value='tw' data-image-css="flag tw" data-title="Taiwan">Taiwan</option>
<option value='tz' data-image-css="flag tz" data-title="Tanzania">Tanzania</option>
<option value='ua' data-image-css="flag ua" data-title="Ukraine">Ukraine</option>
<option value='ug' data-image-css="flag ug" data-title="Uganda">Uganda</option>
<option value='uk' data-image-css="flag uk" data-title="United Kingdom">United Kingdom</option>
<option value='um' data-image-css="flag um" data-title="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
<option value='us' data-image-css="flag us" data-title="United States">United States</option>
<option value='uy' data-image-css="flag uy" data-title="Uruguay">Uruguay</option>
<option value='uz' data-image-css="flag uz" data-title="Uzbekistan">Uzbekistan</option>
<option value='va' data-image-css="flag va" data-title="Vatican City State (Holy See)">Vatican City State (Holy See)</option>
<option value='vc' data-image-css="flag vc" data-title="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value='ve' data-image-css="flag ve" data-title="Venezuela">Venezuela</option>
<option value='vg' data-image-css="flag vg" data-title="Virgin Islands (British)">Virgin Islands (British)</option>
<option value='vi' data-image-css="flag vi" data-title="Virgin Islands (U.S.)">Virgin Islands (U.S.)</option>
<option value='vn' data-image-css="flag vn" data-title="Viet Nam">Viet Nam</option>
<option value='vu' data-image-css="flag vu" data-title="Vanuatu">Vanuatu</option>
<option value='wf' data-image-css="flag wf" data-title="Wallis and Futuna">Wallis and Futuna</option>
<option value='ws' data-image-css="flag ws" data-title="Samoa">Samoa</option>
<option value='ye' data-image-css="flag ye" data-title="Yemen">Yemen</option>
<option value='yt' data-image-css="flag yt" data-title="Mayotte">Mayotte</option>
<option value='yu' data-image-css="flag yu" data-title="Yugoslavia (former)">Yugoslavia (former)</option>
<option value='za' data-image-css="flag za" data-title="South Africa">South Africa</option>
<option value='zm' data-image-css="flag zm" data-title="Zambia">Zambia</option>
<option value='zr' data-image-css="flag zr" data-title="Zaire (former)">Zaire (former)</option>
<option value='zw' data-image-css="flag zw" data-title="Zimbabwe">Zimbabwe</option>
</select>
<pre style="width:600px;">
<code contentEditable="true" id="json_data">[
{description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
{image:'./dist/images/icons/Amex-56.png', description:'My life. My card...', value:'amex', text:'Amex'},
{image:'./dist/images/icons/Discover-56.png', description:'It pays to Discover...', value:'Discover', text:'Discover'},
{image:'./dist/images/icons/Mastercard-56.png', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
{image:'./dist/images/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on delivery', disabled:true},
{image:'./dist/images/icons/Visa-56.png', description:'All you need...', value:'Visa', text:'Visa'},
{image:'./dist/images/icons/Paypal-56.png', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
];
</code></pre>
<div id="json_dropdown" style="padding:10px; margin:10px 0;">
Dropdown placeholder.
</div>
<a href="javascript:void(0)" class="btn" onclick="makeDd()">Click here to convert by above json</a>
<input type="submit" />
</form>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<select is="ms-dropdown" id="car_group2" name="car_group2">
<optgroup label="Mercedes Benz">
<option>Mercedes-Benz GLA</option>
<option>Mercedes-Benz E-Class</option>
<option>Mercedes-Benz S-Class</option>
<option>Mercedes-Benz GLS</option>
</optgroup>
<optgroup label="Jaguar">
<option>Jaguar F-TYPE</option>
<option selected>Jaguar XE</option>
<option>Jaguar F-Pace</option>
<option>Jaguar I-Pace</option>
<option>Jaguar XF</option>
</optgroup>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
function makeDd() {
'use strict';
let json = new Function(`return ${document.getElementById('json_data').innerHTML}`)();
/* new MsDropdown("#json_dropdown", {
byJson: {
data: json, selectedIndex:1
}
})*/
MsDropdown.make("#json_dropdown", {
byJson: {
data: json, selectedIndex:0
}
});
}
(function () {
$("#tech").on("change", function (arg) {
console.log(document.getElementById("tech").msDropdown.uiData);
})
})()
</script>
<script src="./dist/js/dd.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>