2

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

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

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

Пример

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

1
  • Хотел сказать используй label, но там select получает фокус, но не открывается.
    – Qwertiy
    29 дек 2020 в 20:32

2 ответа 2

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

2
  • зачем меняется размер 29 дек 2020 в 19:35
  • size менятся на кол-во опшинов в селекте (select.size = select.length) . Можешь попробовать наплодить опишинов , а в селект поставить атрибут size={12} и размер селекта будет органичен 12 опшинами, если их больше будет скролл
    – Austral1a
    29 дек 2020 в 19:45
1

Просто перефразирую ответ @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>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.