>_Javascript Image Dropdown - Advanced Help

Posted 1 week ago  26 reads  

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

I've made ddSelect as a global variable on this page. You can play with that in console.

#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:

Reminder: I've made ddSelect as a global variable on this page. You can play with that in console.

 

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}
*/
visible

showRows
visibleRows

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. :)

Powered by HashtagCms.org