JavaScript image dropdown - Advanced Help
It's always good to explore more and more. Let's do it then.
If you came to this point, I assume you are aware of the installation and basic stuff about msDropdown
#What are the reactive properties? You can set and get the below properties. Here is an example.
selectedIndex
This property is used to set and get the selected index.
let ddSelect = document.getElementById("tech").msDropdown;
//To set the value
ddSelect.selectedIndex = 3;
//To get get value
let index = ddSelect.selectedIndex;options
This returns <option> (HTMLOptionsCollection) elements. You can set the length of option with this property too.
length
To set and get the length of the options.
value
Returns the selected value
selectedText (readonly)
This returns the selected text of the dropdown.
disabled
To make dropdown enable or disabled. You won't be able to interact with msDropdown when it is disabled.
form (readonly)
This returns the associated <form> else null.
multiple
This property is used to set or get the multiple. You may be able to select more than one item if multiple is true.
name
This returns the name of the <select>. I should mention here; msDropdown borrows the name from the original dropdown to work the "required" attribute.
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>.
size
If the size is greater than 1, It will be converted as a list. The size determines the number of rows to show.
selectedOptions (readonly)
It returns the selected <option>.
children (readonly)
It returns the list of options.
uiData (readonly)
It returns the selected data. You may find the following properties in this one object. isArray will be true if data,UI, index etc will be return as an array.
{data: {
"image": "../dist/images/icons/icon_games.gif",
"title": "",
"description": "",
"value": "games",
"text": "Games",
"className": "",
"imageCss": "",
"index": 2,
"selected": true,
"disabled": false,
"internalStyle": ""
},
ui: <li>,
index: 2,
option: <options>,
isArray:false
}version (readonly)
This returns the current version of the msDropdown.
#How do you access or set these 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:
Try to copy-paste the below code in the console. You can set and get all the properties.
ddSelect.selectedIndex = 0;#Public methods
setSettingAttribute
Set the settings attributes, and you have an option to remake the msDropdown by passing true in the last argument.
/**
*
* @param key
* @param value
* @param shouldRefresh
*/
setSettingAttribute(key, value, shouldRefresh);
//below are available keys and default values
{
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 be multiple or it will set the 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}
};
add
Add an item to select. You can pass second param as index; where you want to insert this item.
/**
* Object can be pass as below
* new Option("Label", "value") or
* {text:"Label", value:"value"}
* or Label as string
* or full object ie {text:"", value:"", description:'', image:'', className:'' title:'', imageCss:''}
* @param obj {option | object}
* @param index {int}
*/
add(item, index);
//example. You may use any of the below example
1. ddSelect.add("HashtagCms");
2. ddSelect.add(new Option("HashtagCms", "https://www.hashtagcms.org"));
3. ddSelect.add({text:"HashtagCms", value:"https://www.hashtagcms.org"});
4. ddSelect.add({text:"HashtagCms", value:"https://www.hashtagcms.org", description:"Laravel open-source CMS"});
remove
Remove an item from <select>. And it returns the removed item with uiData.
/**
* @param index {int}
* @return uiData
*/
remove(index)next
Move to the next index/item
next()previous
Move to the previous index/item
previous()open
Open the dropdown
open()close
Close the dropdown
close()namedItem
if you have given any name of an option, will be returned. say, <option name="cd"></option>
/**
* @param name {string}
* @param withData {boolean}
*/
namedItem(name, withData)item
Return <option> element based on the index that you have passed in the argument. uiData will also be returned if you pass withData=true
/**
* @param index {int}
* @param withData {boolean}
*/
item(index, withData)visible
Show hide or get status of visibility.
/**
* @param isShow
* @return {boolean}
*/
visibleshowRowsvisibleRows
Calculate first item height and set child height.
/**
* @param numberOfRows {int}
*/
showRows(numberOfRows)on
Add an event on the dropdown. Below are possible event types you can pass in the argument.
create, open, close, add, remove, change, blur,
click, dblclick, mousemove, mouseover, mouseout, focus, mousedown, mouseup
/**
* @param type {string}
* @param fn {function}
*/
on(type, fn)
//Example:
ddSelect.on("change", function() {console.log(ddSelect.uiData});
off
Remove event listener
/**
* @param type {string}
* @param fn {function}
*/
off(type, fn);updateUiAndValue
In case there UI is not updated. You can call this method.
updateUiAndValue()refresh
Remake msDropdown
refresh()destroy
Remove msDropdown and returns back to the original dropdown.
destroy()Thank again for using this component. :)