Как предотвратить появление списка options при клике на select?

Question

[artekha]

Нужно отключить появление списка option-ов при клике на select. Я делаю кастомный дропдаун, но нужно именно через select, и именно на нативном js. Я решил перерисовывать option-ы в отдельный список, и стилизовать уже его, показывая при клике на select именно кастомный список, а не стандартный с options. Как убрать появление options?

Comments

[OVK2015]

event.preventDefault()

[artekha]

OVK2015: codepen.io/anon/pen/PGLRGL не работает

[OVK2015]

artekha:

select1.addEventListener('mousedown', dropDown);

function dropDown(e) {
  e.preventDefault();
}

А дальше уже творите чего хотите

[Kovalsky]

artekha: объясните зачем вам обязательно input[type="select"]? Если вам нужен кастомный дропдаун и корректное заполнение формы, делайте кастомный дропдаун и просто скрытые инпуты. Серьёзно, мне кажется ни к чему эти пляски с выпиливанием дефолтного функционала. Или есть смысл?

[artekha]

Никита Полевой: тестовое задание. Я бы сам с радостью все с помощью ul сделать, но увы

Answer 1

[Kovalsky]

Например используйте такой код:

'use strict';

const selects = document.querySelectorAll('select');

selects.forEach((item, i, selects) => {
  item.addEventListener('mousedown', dropDown);
});

function dropDown(e) {
  e.preventDefault();
  let list = this.closest('.select-wrap').querySelector('.select-list');
  if (list.classList.contains('hide')) {
    list.classList.remove('hide');
  } else {
    list.classList.add('hide');
  }

}

Просто listener вешаете на mousedown и дополнительно в нем вызываете .preventDefault()