Dropdown | Vanilla

The custom dropdowns are created with JS by taking the options you put in a select element and creating custom divs for styling and function.

The dropdown works by creating custom markup that contains all of the options that are in the original select element. When a users changes the value on the custom markup it is reflected back to the original select element.

To create a dropdown add the classname dk-dropdown onto a select element and use the dk.dropdowns() function. This function will initialize all current dropdowns on the page that have not been initialized yet.

Use the first argument of the function to pass a css selector to target a specific dropdown or a specific nodelist of dropdowns.

dk.dropdowns();
dk.dropdowns(".CSSSelector");
dk.dropdowns("#idOfDropdown");
dk.dropdowns(`[target-attribute="customer-shipping"]`);

Programmatically set value

Programmatically setting the value of select doesn't triggering a change event the custom markup dropdown will not reflect the correct value. There are two ways around this:

  1. Leveraging the update method that gets attached to the dkDropdown property of the select.
const select = document.querySelector("cssSelectorToGetSelect");
select.value = "newValue";
select.dkDropdown.update();
  1. Setting the value programmatically and then manually firing a change event on the select element.
const select = document.querySelector("cssSelectorToGetSelect");
select.value = "newValue";

/** Create custom change event and dispatchEvent */
const changeEvent = new CustomEvent("change");
select.dispatchEvent(changeEvent);

Dropdown

Standard select using the dk-dropdown classname.

<select class="dk-dropdown">
        <option value="AB">Alberta</option>
        <option value="BC">
            British Columbia
        </option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NS">Nova Scotia</option>
        <option value="NT">
            Northwest Territories
        </option>
        <option value="NU">Nunavut</option>
        <option value="ON">Ontario</option>
        <option value="PE">
            Prince Edward Island
        </option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
    </select>

Javascript

dk => dk.dropdowns()

With Filter

When you pass more than 12 options to a dropdown it will automatically enable the filter. To enable the filter on smaller dropdowns add the data-filter="true" attribute.

<select
        class="dk-dropdown"
        data-filter="true">
        <option value="AB">Alberta</option>
        <option value="BC">
            British Columbia
        </option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NS">Nova Scotia</option>
        <option value="NT">
            Northwest Territories
        </option>
        <option value="NU">Nunavut</option>
        <option value="ON">Ontario</option>
        <option value="PE">
            Prince Edward Island
        </option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
    </select>

Filter Placeholder

To display custom text in the filter input field add the data-filter-placeholder="CUSTOM TEXT" attribute

<select
        class="dk-dropdown"
        data-filter="true"
        data-filter-placeholder="Custom Filter...">
        <option value="AB">Alberta</option>
        <option value="BC">
            British Columbia
        </option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NS">Nova Scotia</option>
        <option value="NT">
            Northwest Territories
        </option>
        <option value="NU">Nunavut</option>
        <option value="ON">Ontario</option>
        <option value="PE">
            Prince Edward Island
        </option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
    </select>

With Placeholder

To display a custom placeholder option as the default add the data-placeholder="CUSTOM TEXT" attribute. NOTE: If setting both the placeholder and preselected options the preselected will override the display.

<select
        class="dk-dropdown"
        data-placeholder="Select Option...">
        <option value="AB">Alberta</option>
        <option value="BC">
            British Columbia
        </option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NS">Nova Scotia</option>
        <option value="NT">
            Northwest Territories
        </option>
        <option value="NU">Nunavut</option>
        <option value="ON">Ontario</option>
        <option value="PE">
            Prince Edward Island
        </option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
    </select>

Pre Selected

To set an option to be preselected add the defaultValue="selectedValue" attribute to the parent select or the selected="selected" attribute to the selected option. NOTE: If setting both the placeholder and preselected options the preselected will override the display.

<select class="dk-dropdown">
        <option value="AB">Alberta</option>
        <option value="BC">
            British Columbia
        </option>
        <option value="MB">Manitoba</option>
        <option selected="" value="NB">
            New Brunswick
        </option>
        <option value="NS">Nova Scotia</option>
        <option value="NT">
            Northwest Territories
        </option>
        <option value="NU">Nunavut</option>
        <option value="ON">Ontario</option>
        <option value="PE">
            Prince Edward Island
        </option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
    </select>

Pre Selected Placeholder

These dropdowns are setup similar to those in ordering having an empty option at the beginning. One contains a default value and the other does not.

<div>
        <select
            class="dk-dropdown"
            data-placeholder="Select Something...">
            <option></option>
            <option value="AB">Alberta</option>
            <option value="BC">
                British Columbia
            </option>
            <option value="MB">Manitoba</option>
            <option value="NB">
                New Brunswick
            </option>
            <option selected="" value="NS">
                Nova Scotia
            </option>
            <option value="NT">
                Northwest Territories
            </option>
            <option value="NU">Nunavut</option>
            <option value="ON">Ontario</option>
            <option value="PE">
                Prince Edward Island
            </option>
            <option value="QC">Quebec</option>
            <option value="SK">
                Saskatchewan
            </option>
        </select>
        <select
            class="dk-dropdown"
            data-placeholder="Select Something...">
            <option></option>
            <option value="AB">Alberta</option>
            <option value="BC">
                British Columbia
            </option>
            <option value="MB">Manitoba</option>
            <option value="NB">
                New Brunswick
            </option>
            <option value="NS">
                Nova Scotia
            </option>
            <option value="NT">
                Northwest Territories
            </option>
            <option value="NU">Nunavut</option>
            <option value="ON">Ontario</option>
            <option value="PE">
                Prince Edward Island
            </option>
            <option value="QC">Quebec</option>
            <option value="SK">
                Saskatchewan
            </option>
        </select>
    </div>

With Label

To add a label above the dropdown wrap the dk-dropdown in a div with the classname dk-dropdown-group and add a div with the classname dk-dropdown-label before the dropdown 

<div>
        <div class="dk-dropdown-group">
            <div class="dk-dropdown-label">
                Select State
            </div>
            <select class="dk-dropdown">
                <option value="AB">
                    Alberta
                </option>
                <option value="BC">
                    British Columbia
                </option>
                <option value="MB">
                    Manitoba
                </option>
                <option value="NB">
                    New Brunswick
                </option>
                <option value="NS">
                    Nova Scotia
                </option>
                <option value="NT">
                    Northwest Territories
                </option>
                <option value="NU">
                    Nunavut
                </option>
                <option value="ON">
                    Ontario
                </option>
                <option value="PE">
                    Prince Edward Island
                </option>
                <option value="QC">Quebec</option>
                <option value="SK">
                    Saskatchewan
                </option>
            </select>
        </div>
    </div>

With Extra Long Option Value

This contains a single option that has way too many words as an example of having an option text wrap inside the dropdown. 

<div>
        <div class="dk-dropdown-group">
            <div class="dk-dropdown-label">
                Select State
            </div>
            <select class="dk-dropdown">
                <option value="AB">
                    Alberta
                </option>
                <option value="BC">
                    British Columbia
                </option>
                <option value="MB">
                    Manitoba
                </option>
                <option value="NB">
                    New Brunswick
                </option>
                <option value="NS">
                    Nova Scotia
                </option>
                <option value="NT">
                    Northwest Territories
                </option>
                <option value="NU">
                    Nunavut
                </option>
                <option value="ON">
                    Ontario
                </option>
                <option value="PE">
                    Prince Edward Island
                </option>
                <option value="QC">Quebec</option>
                <option value="SK">
                    Saskatchewan
                </option>
                <option value="huugeValue">
                    This is some huge amount of
                    text to go inside of a single
                    option within this dropdown
                    and the page used to let this
                    overlap across all elements
                    and off the right side too ;)
                </option>
            </select>
        </div>
    </div>

Error

To utilize the default red error styles on the dropdown add the classname dk-error to the select.

<select class="dk-dropdown dk-error">
        <option value="AB">Alberta</option>
        <option value="BC">
            British Columbia
        </option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NS">Nova Scotia</option>
        <option value="NT">
            Northwest Territories
        </option>
        <option value="NU">Nunavut</option>
        <option value="ON">Ontario</option>
        <option value="PE">
            Prince Edward Island
        </option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
    </select>

Disabled

To set the dropdown to be disabled add the disabled="" attribute to the select.

<select class="dk-dropdown" disabled="">
        <option value="AB">Alberta</option>
        <option value="BC">
            British Columbia
        </option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NS">Nova Scotia</option>
        <option value="NT">
            Northwest Territories
        </option>
        <option value="NU">Nunavut</option>
        <option value="ON">Ontario</option>
        <option value="PE">
            Prince Edward Island
        </option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
    </select>