Dropdown/Select

A dropdown menu displays a collection of choices that allows users to select one or multiple items. This interface element is frequently implemented within forms and data tables as an efficient method for option selection.

Live Example

View the live example in a new tab.

Examples

1.Basic Example

<div id="dropdown" class="dropdown dropdown--lg">
    <button class="dropdown__btn" type="button"><span class="dropdown__label"> </span>
        <span class="dropdown__label-placeholder ">Option</span>
        <span class="dropdown__chevron material-icons">keyboard_arrow_down</span>
    </button>
    
    <ul class="dropdown__list">
        <li>
            <button class="dropdown__option" type="button">
                <span class="dropdown__option-label">Option1</span>
                <span class="dropdown__option-value">option_1</span>
                <span class="dropdown__option-icon material-icons">check
                </span>
            </button>
        </li>
        <li>
            <button class="dropdown__option" type="button">
                <span class="dropdown__option-label">Option 2</span>
                <span class="dropdown__option-value">option_2</span>
                <span class="dropdown__option-icon material-icons">check</span>
            </button>
        </li>
        <li>
            <button class="dropdown__option" type="button">
                <span class="dropdown__option-label">Option 3</span>
                <span class="dropdown__option-value">option_3</span>
                <span class="dropdown__option-icon material-icons">check</span>
            </button>
        </li>
    </ul>
</div>
<script src=""></script>
<script>
    // initialize the dropdown
    let dropdown1_instance = new UODropdown('#dropdown1');

    // get the vaue anytime
    let selectedValue = dropdown1_instance.value;


    // get the value on change
    dropdown1.addEventListener('change', (event) => {
            const {
                value,
                text
            } = event.detail;
            console.log('Selected value:', value);
            console.log('Selected text:', text);
        });
</script>

Preview

See the Pen Select by Ahmed Sayed (@wdalhaj) on CodePen

Initiate the dropdown

To initiate the dropdown, you need to create a new instance of the UODropdown class and pass the dropdown element as a parameter. Here's an example:

let dropdown1 = new UODropdown('#countries_list_dropdown');

Getting selected value

To get the selected value from the dropdown, you can use the value property of the dropdown instance. Here's an example:

let selectedValue = dropdown1.value;

CSS Classes

Class Name	Description
dropdown	Base dropdown container class
dropdown--lg	Large size variant of dropdown
dropdown__btn	Dropdown trigger button
dropdown__label	Container for selected value label
dropdown__label-placeholder	Placeholder text for dropdown
dropdown__label--selection	Class added when option is selected
dropdown__chevron	Dropdown arrow indicator
dropdown__list	Container for dropdown options
dropdown__option	Individual option button
dropdown__option-label	Option text label
dropdown__option-value	Option value
dropdown__option-icon	Option check icon container
selected	Class added to currently selected option

Size Variants

• Large dropdown (dropdown--lg)
• Small dropdown (dropdown--md)