Для начала я эти два фрагмента кода:
listItem.forEach(function (listItem) {
listItem.addEventListener('click', function () {
btnList.innerText = this.innerText;
inputNone.value = this.dataset.value;
dropdownList.classList.remove('_visible');
});
});
listItem.forEach(function (listItem) {
listItem.addEventListener('keyup', function (event) {
if (event.key === 'Enter') {
btnList.innerText = this.innerText;
inputNone.value = this.dataset.value;
dropdownList.classList.remove('_visible');
}
});
});
Советую изменить на эти:
dropdownList.addEventListener('click', (e) => {
if (!e.target.classList.contains('dropdown__list-item')) return;
btnList.innerText = e.target.innerText;
inputNone.value = e.target.dataset.value;
dropdownList.classList.remove('_visible');
})
dropdownList.addEventListener('keyup', e => {
if (!e.target.classList.contains('dropdown__list-item')) return;
if (e.key !== 'Enter') return;
btnList.innerText = e.target.innerText;
inputNone.value = e.target.dataset.value;
dropdownList.classList.remove('_visible');
})
Так как если вы захотите добавить новые элементы в список динамически, вам придется ручками добавлять обработчики им.
То есть если я выберу какую-то опцию в десктопной версии, перейду на мобилку, то там эта опция не будет выбрана. Так как в форме я буду отправлять значение именно того селекта, который нативный, ему нужно значение, выбранное на кастомной десктопной версии - задавать.
Если вы обрабатываете значение из
<select>, то зачем вы присваиваете полученное после клика по пункту в кастомном dropdow значение другому элементу?
<input type="text" name="select-category" value="" class="dropdown__input-hidden">
const inputNone = document.querySelector('.dropdown__input-hidden');
/* *** */
inputNone.value = this.dataset.value;
Очевидным решением будет присваивать значение именно
<select> который с ваших слов вы обрабатываете в последующем.
<select class="what_kind" name="boots"> *** </select>
const whatKindSlct = document.querySelector('.what_kind');
/* *** */
whatKindSlct.value = this.dataset.value;
// Или
// whatKindSlct.value = e.target.dataset.value;
// Если решите использовать мой код
P.S. Обратите внимание на повторяющийся код
