The HTML <select>
element is used to create dropdown lists, often used in web pages used for forms to collect (pre-defined) user input. Unfortunately, dropdowns based on standard <select>
elements cannot contain additional elements like images and are limited to pure text.
Are you tired of old-fashioned dropdowns? You want to create more eye-minded selection lists using images or icons?
This is possible using msDropdown, a quite handy JS library for enhanced HTML <select> elements. With the help of msDropdown, standard HTML dropdowns based on <select> elements are tranformed into powerful modern dropdowns with no limits.
To see msDropdown in action, have a look at the J1 Translator shown by the Google Translate icon in the QuickLinks bar.
Using additional flag icons for the languages available is much more intuitive and help users to select a language, even the text portion in the dropdown is in different languages. For more details on using the JS library for enhanced HTML dropdowns, have a look at the msDropdown home page.
Properties
Many properties are available to control dropdowns based on msDropdown for your needs. Find all available attributes in the following sections.
Attributes
Besides the standard HTML select options like name, size, or multiple, msDropdown support additional attributes for better control for your extended ropdown implementation.
Name | Description |
---|---|
| 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. |
| If this property is enabled, you won’t be able to interact with the element. |
| It returns the name of the <form> element to associate the <select> with. This is readonly property. |
| It returns the name of the <select> element. |
| 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 attributes
Name | Description |
---|---|
| This is the main CSS class. Default value is |
| If you are in need to hide the icon on the header. The default value is: |
| To interact msDropdown with an event. The default value is: |
| Sometimes you need a list of children bigger than the dropdown. This can help. The default value is: |
| By default, it shows all the options listed in the dropdown. If you need to show some rows you can use this attribute. The default value is: |
| If you enable this; multiple will automatically set to true. It shows a checkbox with each list item. The default value is: |
| If 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: |
| It lets you search by typing any key when msDropdown is open. Just like auto-suggest. The default value is: |
| If 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: |
| If multiple is true and you select more than one item; it shows a text +N. N denotes numbers here. The default value is: |
| If |
Option attributes
Besides value, text, selected, disabled, class, and style attributes, msDropdown support additional option attributes.
Name | Description |
---|---|
| This attribute is used to display an image in an item |
| If you need to display any text on hover of an item |
| To display a description along with the text in the next line. |
| You may use this if you want to display an image using CSS. |
Javascript API
Besides the control over dropdowns managed by msDropdown using static settings using attributes, a rich JS API is available. To change the behavior of extended dropdowns at run-time, find all JS API functions available from below.
Set and get properties
Name | Description |
---|---|
| This property is used to set and get the selected index.
|
| This returns |
| To set and get the length of the options. |
| Returns the selected value |
| This returns the selected text of the dropdown. |
| To make dropdown enable or disabled. You won’t be able to interact with msDropdown when it is disabled. |
| This returns the associated |
| This property is used to set or get the multiple. You may be able to select more than one item if multiple is true. |
| This returns the name of the <select>. I should mention here; msDropdown borrows the name from the original dropdown to work the "required" attribute. |
| 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 |
| If the size is greater than 1, It will be converted as a list. The size determines the number of rows to show. |
| It returns the selected <option>. |
| It returns the list of options. |
| It returns the selected data. You may find the following properties in this one object.
|
| This returns the current version of the msDropdown. |
Get or Set properties
Here is an example. The below dropdown id is "tech". Each element has a new property called msDropdown once it’s converted to msDropdown/image dropdown. You can access all the public properties and methods from that one.
let ddSelect = document.getElementById("tech").msDropdown;
Select a property:
Reminder: I’ve made ddSelect
as a global variable on this page. You can play with that in console
.
selectedIndex options length selectedText disabled form multiple name required size selectedOptions children uiData
Try to copy-paste the below code in the console. You can set and get all the properties.
ddSelect.selectedIndex = 0;
Public methods
Name | Description |
---|---|
| Set the settings attributes, and you have an option to remake the msDropdown by passing
Below are available keys and default values:
|
| Add an item to select. You can pass second param as index; where you want to insert this item.
|
| Remove an item from <select>. And it returns the removed item with uiData.
|
| Move to the next index/item
|
| Move to the previous index/item
|
| Open the dropdown
|
| Close the dropdown
|
| If you have given any name of an option, will be returned. say, <option name="cd"></option>
|
| Return
|
| Show hide or get status of visibility.
|
| Calculate first item height and set child height.
|
| Add an event on the dropdown. Below are possible event types you can pass in the argument:
Example
|
| Remove event listener.
|
| In case there UI is not updated. You can call this method.
|
| Recreatea a msDropdown.
|
| Remove msDropdown and returns back to the original dropdown.
|
Examples
Simple dropdown
There are two ways to apply msDropdown on <select>
elements. You can add is="ms-dropdown"
attributes, as shown in the example below.
<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>
-
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');
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>
Dropdown with checkboxes
<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>
Option groups
<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>
Dropdown with CSS images
<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='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>
Dropdown as a list
Please select one Email FAQ Games Music Phone Graph Secured Video CD
<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>
Create Dropdown from 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.
<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
If 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 setting parameters you can pass to the msDropdown? It is similar to the data-attributes
. The difference is that you passed as a camelCase key for better readability without the prefix 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
.
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,
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
}
});