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