Drop Down With Icons Using Bootstrap 5 and javaScript

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
        href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Drop Down With Icons Using Bootstrap 5 and Javascript</title>

</head>

<body>
    <div class="main-div">
        <h2 class="heading-para">Drop Down With Icons Using Bootstrap 5 and Javascript</h2>

<label>Select Currency</label>
        <div class="dropdown dropdown-main-div mt-2" id="sik-select">
            <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                Select Your Item
            </button>
            <ul class="dropdown-menu dropdown-menu-dark">
                <li>
                    <span class="dropdown-item" data-value="btc">
                        <img class="dropdown-icon" src="https://www.teknowize.com/attachments/file_1660858429.svg"
                            alt="item-1" />
                        item-1
                    </span>
                </li>
                <li>
                    <span class="dropdown-item" data-value="eth">
                        <img class="dropdown-icon" src="https://www.teknowize.com/attachments/file_1660858452.svg"
                            alt="item-2" />
                        item-2
                    </span>
                </li>
                <li>
                    <span class="dropdown-item" data-value="trx">
                        <img class="dropdown-icon" src="https://www.teknowize.com/attachments/file_1660858484.svg"
                            alt="item-3" />
                        item-3
                    </span>
                </li>
                <li>
                    <span class="dropdown-item" data-value="usdt">
                        <img class="dropdown-icon" src="https://www.teknowize.com/attachments/file_1660858509.svg"
                            alt="item-4" />
                        item-4
                    </span>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

CSS Copied

* {
            box-sizing: border-box;
            font-family: 'Fira Sans', sans-serif;
        }

body {
            display: grid;
            place-items: center;
            min-height: 100vh;
        }

.main-div {
            width: 100%;
            max-width: 375px;
        }

.heading-para {
            font-size: 20px;
            color: #060272;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-align: center;
        }

label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

.dropdown-icon {
            height: 1em;
            vertical-align: baseline;
            margin-bottom: -0.1em;
        }

.dropdown-main-div>button.dropdown-toggle {
            position: relative;
            width: 100%;
            max-width: 375px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 2ch;
            text-align: left;
            box-shadow: none !important;
            outline: none;

}

.dropdown-main-div>button.dropdown-toggle::after {
            position: absolute;
            right: 1ch;
            top: calc(50% - 0.2ch);
        }

.dropdown-main-div .dropdown-item {
            cursor: pointer;
        }

.dropdown-menu-dark {
            width: 100%;
            max-width: 375px;
        }

JS Copied

class SikDropdown {
			ele = null;
			dropdown = null;
			el = {
				input: null,
				toggle: null,
				list: null
			};

items = {};
			count = 0;
			_cbs = [];
			defaults = {
				name: "sik-input",
				value: "",
				placeholder: "Select Item"
			};
			options = {};
			constructor(identifier, opt = {}) {
				this.ele = document.querySelector(identifier);
				if (this.ele) {
					//Set options:
					this.setOptions(opt);
					//Create hidden input:
					this.el.input = document.createElement("input");
					this.el.input.setAttribute("type", "hidden");
					this.el.input.setAttribute("name", this.options.name);
					this.el.input.setAttribute("value", "");
					this.ele.prepend(this.el.input);

//Select list:
					this.el.list = this.ele.querySelector(".dropdown-menu");
					this._fillItems();
					//Set toggler:
					this.el.toggle = this.ele.querySelector(".dropdown-toggle");
					this.dropdown = new bootstrap.Dropdown(this.el.toggle);
					//Set initial value & placeholder:
					this.setValue(this.options.value);
					//Set core handlers:
					this._attachCoreHandlers();
					this.trigger("init");
				} else {
					console.warn("Cant create a Sik Dropdown - selector is invalid");
				}
			}
			setOptions(opt) {
				this._extend(this.options, this.defaults, opt);
			}
			addItem(value, label) {
				if (!this.items.hasOwnProperty(value)) {
					let itemContainer = document.createElement('li');
					itemContainer.innerHTML = `<span class="dropdown-item" data-value="${value}">${label}</span>`;
					this.el.list.appendChild(itemContainer);
					let item = itemContainer.querySelector(".dropdown-item");
					this.count++;
					this.items[value] = {
						el: item,
						value: value,
						label: item.innerHTML.trim()
					};
					item.addEventListener("click", this.trigger.bind(this, "select"));
				}
			}
			removeItem(value) {
				if (this.items.hasOwnProperty(value)) {
					this.items[value].el.closest("li").remove();
					this.count--;
					delete this.items[value];
					if (this.value() === value) {
						this.setValue(null);
					}
				}
			}
			setValue(value, close = true) {
				if (this.items.hasOwnProperty(value)) {
					this.el.input.setAttribute("value", value);
					this.el.toggle.innerHTML = this.items[value].label;
				} else {
					this.el.input.setAttribute("value", "");
					if (this.options.placeholder) {
						this.el.toggle.innerHTML = this.options.placeholder;
					}
				}
				if (close) this.dropdown.hide();
			}
			value() {
				return this.el.input ? this.el.input.value : null;
			}
			text() {
				let value = this.value();
				if (this.items.hasOwnProperty(value)) {
					return this.items[value].label.trim();
				}
				return "";
			}
			open() {
				if (this.dropdown) {
					this.dropdown.show();
				}
			}
			close() {
				if (this.dropdown) {
					this.dropdown.hide();
				}
			}
			toggle() {
				if (this.dropdown) {
					this.dropdown.toggle();
				}
			}
			attachHandler(ev, cb) {
				this._cbs.push({
					ev: ev,
					fn: cb
				});
			}
			detachHandler(ev) {
				for (let i = 0; i < this._cbs.length; i++) {
					if (this._cbs[i].ev === ev) {
						this._cbs.splice(i, 1);
					}
				}
			}
			trigger(ev) {
				//console.log(this, ev, el);
				for (let cb of this._cbs) {
					let event = cb.ev.split(".");
					if (event.length > 1 && event[1] === ev) {
						let [, ...args] = arguments;
						cb.fn.call(this, ...args);
					}
				}
			}
			_fillItems() {
				if (this.el.list) {
					let items = this.el.list.querySelectorAll(".dropdown-item");
					let i = items.length;
					this.count = items.length;
					while (i--) {
						const value = items[i].getAttribute("data-value");
						this.items[value] = {
							el: items[i],
							value: value,
							label: items[i].innerHTML.trim()
						};
						items[i].addEventListener("click", this.trigger.bind(this, "select"));
					}
				}
				console.log(this.items);
			}
			_attachCoreHandlers() {
				this.attachHandler("core.select", function (item = null) {
					if (typeof item === 'object' && 'target' in item) {
						let selected = item.target.hasAttribute("data-value")
							? item.target
							: item.target.closest("[data-value]");
						let value = selected ? selected.getAttribute("data-value") : null;
						this.setValue(value);
					}
				});
				this.attachHandler("core.open", function () {
					console.log("open", arguments);
				});
				this.attachHandler("core.close", function () {
					console.log("close", arguments);
				});
				this.attachHandler("core.init", function () {
				});
				//Bind to dropdown:
				this.el.toggle.addEventListener('show.bs.dropdown', this.trigger.bind(this, "open"));
				this.el.toggle.addEventListener('hide.bs.dropdown', this.trigger.bind(this, "close"));
			}
			_extend() {
				for (var i = 1; i < arguments.length; i++)
					for (var key in arguments[i])
						if (arguments[i].hasOwnProperty(key))
							arguments[0][key] = arguments[i][key];
				return arguments[0];
			}
		}

//This how we intiate it and extend the bs funcionality:
		var dropdown = new SikDropdown("#sik-select", {
			name: "select-example", // the input field name
			placeholder: "Select Currency",
			value: null
		});