Проблема при кастомизации select-а?

Question

logdog90 @logdog90

JavaScript

Проблема при кастомизации select-а?

Имеется файл index.html

<div class="page">
        <div class="container">
            <div id="select" class="select">
                <div class="select__input">
                    <span class="select__current">Владивосток</span>
                    <img src="images/dropdown-icon.svg" alt="" class="select__icon">
                </div>
                <div class="select__dropdown hidden">
                    <ul class="select__list">
                        <li id="1" data-type="item" class="select__item">Владивосток</li>
                        <li id="2" data-type="item" class="select__item">Артём</li>
                        <li id="3" data-type="item" class="select__item">Уссурийск</li>
                        <li id="4" data-type="item" class="select__item">Находка</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Имеется файл со стилями style.css

body {
    box-sizing: border-box;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 400;
    background-color: #eee;
}
  
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container {
    max-width: 576px;
    height: 500px;
    margin: 0 auto;
    padding: 8px 0;
    background-color: #eee;
}

.select {
    width: 100%;
    position: relative;
}

.select__input {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 160px;
    margin: 0 auto;
    background-color: #fff;
    padding: 4px 15px 2px 17px;
    border-radius: 5px;
}

.select__icon {
    width: 12px;
    height: 11px;
}

.select__dropdown {
    position: absolute;
    width: 160px;
    top: 0;
    left: calc(50% - 80px);
    background-color: #fff;
    box-shadow: 0px 0px 15px -5px #543b97;
    border-radius: 10px;
    text-align: center;
    line-height: 38px;
}

.select__item:hover {
    color: #612a93;
}

.hidden {
    display: none;
}

.select__item.selected {
    font-weight: 700;
}

Так же имеется основной файл с script.js

const select = document.querySelector('#select');
const dropdown = document.querySelector('.select__dropdown');
const items = document.querySelectorAll('.select__item');
const selectCurrent = document.querySelector('.select__current');

select.addEventListener('click', function (e) {
    e.preventDefault();
    toogleHidden();
    addSelected();
});

function toogleHidden() {
    dropdown.classList.toggle('hidden');
}

function addSelected() {
    items.forEach(item => {
        item.addEventListener('click', function (e) {
            const target = e.target,
                itemElement = document.querySelector(`li[id='${e.target.id}']`).innerText
                selectCurrent.innerText = itemElement;
            
            if (target == item) {
                item.classList.add('selected');
            }
        });
    });
}

Помогите пожалуйста разобраться с js-кодом!
При нажатии на select открывается блок select__dropdown, в котором содержится item-ы с городами. Как сделать так, чтобы при клике какой-нибудь город, он выбирался один(а не все при клике)? И как сделать какой-нибудь город, например Владивосток, по умолчанию placeholder-ом?