Стандартный select -
<select id="select-standart">
<option value="value1"> option 11 </option>
<option value="value2"> option 22 </option>
<option value="value3"> option 33 </option>
<option value="value4"> option 44 </option>
<option value="value5"> option 55 </option>
</select>
На кастомном select стоит display: none; -
<div class="dropdown">
<button class="dropdown__button" type="button"> Practice / Institution* </button>
<ul class="dropdown__list">
<li class="dropdown__list-item"> option1 </li>
<li class="dropdown__list-item"> option2 </li>
<li class="dropdown__list-item"> option3 </li>
<li class="dropdown__list-item"> option4 </li>
<li class="dropdown__list-item"> option5 </li>
</ul>
</div>
html - страница -
<form class="tasks__request">
<div class="input_name tusks__item">
<input type="text" placeholder="Full Name*">
</div>
<div class="input_position tusks__item">
<input type="text" placeholder="Title/Position*">
</div>
<div class="select_institution tusks__item">
<div class="select-items">
<select id="select-standart">
<option value="value1"> option 11 </option>
<option value="value2"> option 22 </option>
<option value="value3"> option 33 </option>
<option value="value4"> option 44 </option>
<option value="value5"> option 55 </option>
</select>
<div class="dropdown">
<button class="dropdown__button" type="button"> Practice / Institution* </button>
<ul class="dropdown__list">
<li class="dropdown__list-item"> option1 </li>
<li class="dropdown__list-item"> option2 </li>
<li class="dropdown__list-item"> option3 </li>
<li class="dropdown__list-item"> option4 </li>
<li class="dropdown__list-item"> option5 </li>
</ul>
</div>
</div>
</div>
<div class="input_email tusks__item">
<input type="text" placeholder="Email Address*">
</div>
<div class="input_phone tusks__item">
<input type="text" placeholder="Phone Number*">
</div>
<div class="input_profession tusks__item">
<div class="select-items">
<select id="select-standart">
<option value="value1"> option 11 </option>
<option value="value2"> option 22 </option>
<option value="value3"> option 33 </option>
<option value="value4"> option 44 </option>
<option value="value5"> option 55 </option>
</select>
<div class="dropdown">
<button class="dropdown__button" type="button"> Practice / Institution* </button>
<ul class="dropdown__list">
<li class="dropdown__list-item"> option1 </li>
<li class="dropdown__list-item"> option2 </li>
<li class="dropdown__list-item"> option3 </li>
<li class="dropdown__list-item"> option4 </li>
<li class="dropdown__list-item"> option5 </li>
</ul>
</div>
</div>
</div>
<div class="input_inquiry tusks__item">
<div class="select-items">
<select id="select-standart">
<option value="value1"> option 11 </option>
<option value="value2"> option 22 </option>
<option value="value3"> option 33 </option>
<option value="value4"> option 44 </option>
<option value="value5"> option 55 </option>
</select>
<div class="dropdown">
<button class="dropdown__button" type="button"> Practice / Institution* </button>
<ul class="dropdown__list">
<li class="dropdown__list-item"> option1 </li>
<li class="dropdown__list-item"> option2 </li>
<li class="dropdown__list-item"> option3 </li>
<li class="dropdown__list-item"> option4 </li>
<li class="dropdown__list-item"> option5 </li>
</ul>
</div>
</div>+
</div>
<div class="input_message tusks__item">
<textarea name="message" placeholder="Enter Message*"></textarea>
</div>
</form>
JS - КОД
//Скрыть стандартный select(select-standart) и показать кастомный select(dropdown)
document.querySelectorAll('.select-items').forEach(function (){ //.select-items - блоки в которых находятся стандартный и кастомный select
document.querySelector('select-standart').classList.add('.box-none'); //select-standart - id стандартных тегов select
document.querySelector('.dropdown').classList.add('.box-block'); //dropdown - кастомный select
});
//Функционал кастомных select
document.querySelectorAll('.dropdown').forEach(function (dropDownWrapper){
const dropDownBtn = dropDownWrapper.querySelector('.dropdown__button');
const dropDownList = dropDownWrapper.querySelector('.dropdown__list');
const dropDownListItems = dropDownList.querySelectorAll('.dropdown__list-item');
//Клик по кнопке. Окрыть, закрыть
dropDownBtn.addEventListener('click', function (){
dropDownList.classList.toggle('box-block');
});
//Выбор елемента списка. Запомнить выбранное значение, закрыть дропдаун
dropDownListItems.forEach(function (listItem){
listItem.addEventListener('click', function (){
dropDownBtn.innerText = this.innerText;
dropDownList.classList.remove('box-block');
})
});
//Клик снаружи дропдауна. Закрыть дропдаун
document.addEventListener('click', function(e){
if (e.target !== dropDownBtn) {
dropDownList.classList.remove('box-block');
}
});
});
Стандартный и кастомный селект работает отлично, подскажите, пожалуйста, как изменить мой js-код чтоб скрыть стандартный селект и вместо него поставить свойю. Я новичок в этом деле