<div class="wrapper">
<div class="pp_select">
<div class="pp_selected">Выберите</div>
<div class="pp_options">
<span>Первый пункт</span>
<span>Второй пункт</span>
</div>
</div>
</div>
<button class="add_btn">Добавить</button>
.pp_select {
position: relative;
display: block;
margin: 15px 0;
width: 170px;
}
.pp_selected {
display: inline-block;
border: 2px solid #333;
padding: 5px 30px 5px 10px;
width: 100%;
cursor: pointer;
user-select: none;
position: relative;
}
.pp_selected:after {
content: "";
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5Mi4wMDQgNDkyLjAwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDkyLjAwNCA0OTIuMDA0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KC0xLjgzNjk3ZS0xNiAxIC0xIC0xLjgzNjk3ZS0xNiA0OTIuMDA0IDguNTI2NTFlLTE0KSI+PGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMzgyLjY3OCwyMjYuODA0TDE2My43Myw3Ljg2QzE1OC42NjYsMi43OTIsMTUxLjkwNiwwLDE0NC42OTgsMHMtMTMuOTY4LDIuNzkyLTE5LjAzMiw3Ljg2bC0xNi4xMjQsMTYuMTIgICAgYy0xMC40OTIsMTAuNTA0LTEwLjQ5MiwyNy41NzYsMCwzOC4wNjRMMjkzLjM5OCwyNDUuOWwtMTg0LjA2LDE4NC4wNmMtNS4wNjQsNS4wNjgtNy44NiwxMS44MjQtNy44NiwxOS4wMjggICAgYzAsNy4yMTIsMi43OTYsMTMuOTY4LDcuODYsMTkuMDRsMTYuMTI0LDE2LjExNmM1LjA2OCw1LjA2OCwxMS44MjQsNy44NiwxOS4wMzIsNy44NnMxMy45NjgtMi43OTIsMTkuMDMyLTcuODZMMzgyLjY3OCwyNjUgICAgYzUuMDc2LTUuMDg0LDcuODY0LTExLjg3Miw3Ljg0OC0xOS4wODhDMzkwLjU0MiwyMzguNjY4LDM4Ny43NTQsMjMxLjg4NCwzODIuNjc4LDIyNi44MDR6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiMzMzMzMzMiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48L2c+IDwvc3ZnPg==);
background-repeat: no-repeat;
background-size: contain;
height: 13px;
width: 13px;
top: 0; right: 5px; bottom: 0;
margin: auto;
position: absolute;
}
.pp_options {
display: none;
position: absolute;
top: 100%; left: 0;
width: 100%;
background-color: #fff;
z-index: 1;
}
.pp_options.active {
display: inline-block;
}
.pp_options span {
display: block;
padding: 5px 10px 5px 10px;
margin-top: -1px;
border: 1px solid #333;
cursor: pointer;
user-select: none;
}
.pp_options span:hover {
background-color: #dedede;
}
document.addEventListener('click', ({target}) => {
if (target && target.classList.contains('pp_selected')) {
// Открываем\Закрываем список
target.parentNode.querySelector('.pp_options').classList.toggle('active');
}
if (target && target.parentNode.classList.contains('pp_options')) {
// Вставляем выбранный элемент в selected
target.parentNode.classList.toggle('active');
target.parentNode.parentNode.querySelector('.pp_selected').innerHTML = target.innerHTML;
}
});
// Добавление нового select
let addBtn = document.querySelector('.add_btn');
let wrapper = document.querySelector('.wrapper');
addBtn.addEventListener('click', () => {
createSelect();
});
function createSelect() {
let selectBlock = document.createElement('div');
selectBlock.classList = 'pp_select';
let selected = document.createElement('div');
selected.classList = 'pp_selected';
selected.innerHTML = 'Выберите';
selectBlock.append(selected);
let options = document.createElement('div');
options.classList = 'pp_options';
let option1 = document.createElement('span');
option1.innerHTML = 'Первый';
let option2 = document.createElement('span');
option2.innerHTML = 'Второй';
options.append(option1, option2);
selectBlock.append(options);
wrapper.append(selectBlock);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.