open onclick

Автор вопроса: ILC

Вообщем, есть елемент <select> и нужно по нажатию кнопки его открыть.

Как это сделать?

HTML:

<select id="selector">
<option>1</option>
<option>2</option>
<option> </option>
</select>
<button> Open select </button>

Вообщем, как привести select к открытию при нажатии кнопки? Зная, что .click() не работает в этом случае.

P.S. Вот Jsfiddle c примером

Источник

Ответы (1 шт):

Автор решения: Sumskyi Vasyl

Можно по клику измменять size селекта http://htmlbook.ru/html/select/size

window.addEventListener('DOMContentLoaded', () => {
  openSelect('button', '#selector')
})

const openSelect = (triggerSelector, selectSelector) => {
  const trigger = document.querySelector(triggerSelector) // Достаем нужные елементы
  const select = document.querySelector(selectSelector)
  let selectSize = select.options.length // сохраняем первоначальное количество елементов в селекте
  trigger.addEventListener('click', () => {
    select.focus()
    select.size = selectSize //по клику выставляем высоту селекта
  })

  select.addEventListener('blur', () => {
    select.size = 1 // тут сбрасываем обратно
  })
}

<select id="selector">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</select>
<button> Open select </button>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.