js как при клике на элемент открывать список select

Question

Как сделать клик по элементу после чего открывается список select

То есть, при нажатие на элемент firstlevel - открывается select.lastlevel

Подскажите пожалуйста, как это сделать

Пример

<span class="firstlevel">button</span>
<select class="lastlevel">
  <option>one</option>
  <option>tho</option>
  <option>three</option>
</select>

Answer 1

const span = document.querySelector('.firstlevel')
const select = document.querySelector('.lastlevel')

let toggleState = false
function toggle() {
    span.addEventListener('click', () => {

        toggleState = !toggleState
            return toggleState ? (select.size = select.length) : (select.size = 1)
        })
}

span.onclick = toggle

Answer 2

Просто перефразирую ответ @dresser.

Это единственный способ, создающий имитацию открытия <select>.

Вопрос с 2008 года поднимался уже многократно.

let firstlevel = document.querySelector('.firstlevel')

let lastlevel = document.querySelector('.lastlevel')

firstlevel.onclick = ()=>{
  lastlevel.size = lastlevel.length;
  lastlevel.focus();
};

lastlevel.onchange = lastlevel.onclick = lastlevel.onblur = ()=>{
    lastlevel.size = 1;
};

.lastlevel{
  position: absolute;
}

<span class="firstlevel">button</span>&nbsp;
<select class="lastlevel">
  <option>one</option>
  <option>tho</option>
  <option>three</option>
</select>

БЛОГ НА HUSL

js как при клике на элемент открывать список select

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