JavaScript image dropdown - Help
I assume you know what it is. If not please visit to know about this. Ok, Let's come to the business.
#Installation
Add this code in <head> section. You may need to change the folder. Change dist/css/ folder to your desired folder.
<link rel="stylesheet" type="text/css" href="dist/css/dd.css" />And below code before the </body>. Change dist/js/ folder to your desired folder.
<script src="dist/js/dd.min.js"></script>You may use CDN too for the above links. Version may vary.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/dd.min.css" /><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/dd.min.js"></script>#Attributes respected by msDropdown are worth mentioning
Besides selectedIndex, options, name, size, multiple, etc attributes/properties; msDropdown reads below attributes too.
autofocus
As the name suggests, this attribute lets you choose that a form control should have autofocus when the page is loaded. Only one element can have autofocus.
disabled
When this property is enabled, you won't be able to interact with the element.
form
It returns the name of the <form> element to associate the <select> with. This is readonly property.
name
It returns the name of the <select> element.
required
A Boolean attribute indicating that an option with a non-empty string value must be selected. Here is a surprise; you can change the default message too. Just set the data-error-message="Your custom message
here" in <select>.
#Data attributes respected by msDropdown
data-main-css
This is the main CSS class. Default value is ms-dd
data-show-icon
When you are in need to hide the icon on the header. The default value is: true
data-event
To interact msDropdown with an event. The default value is: click
data-child-width
Sometimes you need a list of children bigger than the dropdown. This can help. The default value is: null or whatever is defined in the CSS.
data-child-height
By default, it shows all the options listed in the dropdown. When you need to show some rows you can use this attribute. The default value is: null
data-enable-checkbox
If you enable this; multiple will automatically set to true. It shows a checkbox with each list item. The default value is: false
data-checkbox-name-suffix
When the checkbox is enabled; there is an extra field will be posted with the form. Say <select> name is "tech" and checkbox is enabled, tech_mscheck[] will be posted as an array. The default value is: {select_name}_mscheck
data-enable-auto-filter
It lets you search by typing any key when msDropdown is open. Just like auto-suggest. The default value is: true
data-visible-rows
When you set this attribute, it calculates the max height of the items and sets the child height based on the number provided in value. You can also achieve this by using the data-child-height property, only that set in pixels. The default value is: null
data-show-plus-item-counter
When multiple is true and you select more than one item; it shows a text +N. N denotes numbers here. The default value is: true
data-error-message
If required is enabled in <select> it shows a required message. Guess what? You can change that by setting this attribute. The default value is: Please select an item from this list
#Option attributes respected by msDropdown
Besides value, text, selected, disabled, class, and style attributes/properties; msDropdown reads the below attributes too.
data-image
This attribute is used to display an image in an item
data-title
When you need to display any text on hover of an item
data-description
To display a description along with the text in the next line.
data-image-css
You may use this if you want to display an image using CSS.
JavaScript image dropdown - Example
#Example: Simple dropdown
There are two ways that you can apply msDropdown on <select> element
1. You can add is="ms-dropdown"attributes. Like we have in the below example.
<select class="tech" name="tech" is="ms-dropdown">
<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>2. You don't need the below code if you have already included dd.min.js in the bottom of the page. Like I've mentioned in the installation section.
In case you want to convert later by script, you can use the below code. You may use a CSS selector too.
MsDropdown.make('#select_element');
//or
new MsDropdown('.select_elements');#Example: Dropdown with description
Did you notice? There is an extra attribute data-description in <option>.
<select id="payments" name="payments" is="ms-dropdown" data-enable-auto-filter="false" required>
<option value="" data-description="Choose 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 delivery</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>#Example: Dropdown with checkbox
<select name="tech_with_checkbox" 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>#Example: How about optgroup? Well, that too handled.
<select is="ms-dropdown" 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>#Example: Dropdown with CSS image.
<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>
#Example: Dropdown as a list. Ctrl+Click and Shift+Click also works.
<select name="gameList[]" is="ms-dropdown" multiple size="5">
<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>
#Example: Create by json object
[
{description:'Choose your payment gateway', value:'', text:'Payment Gateway'},
{image:'/assets/mywork/web-components/image-dropdown/images/icons/Amex-56.png', description:'My life. My card...', value:'amex', text:'Amex'},
{image:'/assets/mywork/web-components/image-dropdown/images/icons/Discover-56.png', description:'It pays to Discover...', value:'Discover', text:'Discover'},
{image:'/assets/mywork/web-components/image-dropdown/images/icons/Mastercard-56.png', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
{image:'/assets/mywork/web-components/image-dropdown/images/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on delivery', disabled:true},
{image:'/assets/mywork/web-components/image-dropdown/images/icons/Visa-56.png', description:'All you need...', value:'Visa', text:'Visa'},
{image:'/assets/mywork/web-components/image-dropdown/images/icons/Paypal-56.png', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
];
Below method is being called on "Click here to convert by above json" button.
Dropdown placeholder. Click here to convert by above JSON
<script>
function makeDd() {
'use strict';
//get the data from above json string
let json = new Function(`return ${document.getElementById('json_data').innerHTML}`)();
//clean the holder
document.getElementById("json_dropdown").innerHTML = "";
//convert to msDropdown
MsDropdown.make("#json_dropdown", {
byJson: {
data: json, selectedIndex: 0, name: "json_dropdown",
size: 0, multiple: false, width: 450
},
enableAutoFilter:false
});
//or we can use like this too.
/*new MsDropdown(document.getElementById("json_dropdown"), {
byJson: {
data: json, name: "json_dropdown"
}
});*/
}
</script>
#What are the settings params
When you are creating with the help of JavaScript you might need this.
So, how do you create it? Syntax is below
//Style 1
MsDropdown.make("element", {...settings});
//Style 2
new MsDropdown(document.getElementById("element_id"), {...settings});
And what are the settings params you can pass to the msDropdown? It is similar to the data-attributes, those I've mentioned above in this document. Only difference is that you passed as a camelCase key without the "data-". For example if you want to set child width, you passed in attribute as data-child-width="300px" whereas you need to pass in settings as childWidth:'300px'
So, here is an example what you can pass in settings.
MsDropdown.make("element", {
byJson: {
data: null, selectedIndex: 0, name: null,
size: 0, multiple: false, width: 250
},
mainCss: 'ms-dd',
rowHeight: null,
visibleRows: null,
showIcon: true,
zIndex: 9999,
event:'click',
style: '',
childWidth:null,
childHeight:null,
enableCheckbox:false, //this needs to multiple or it will set element to multiple
checkboxNameSuffix:'_mscheck',
showPlusItemCounter:true,
enableAutoFilter:true,
showListCounter:false,
errorMessage:'Please select an item from this list',
on: {create: null,open: null,close: null,add: null,remove: null,change: null,blur: null,click: null,dblclick: null,mousemove: null,mouseover: null,mouseout: null,focus: null,mousedown: null,mouseup: null}
});
Thanks for using this web component. If you need any help. Please feel free to comment.
Wait, What about callbacks and reactive properties? Well, this document is already too long. Let's visit here explore more.