В последнее время всем нужны мобильные версии сайтов, а какая мобильная версия без мобильного меню, а какое мобильное меню без выпадающего списка SELECT. Так вот, сегодня рассмотрим как активировать select javascript, то есть развернуть выпадающий список без нажатия на сам список, а внешней кнопкой.

Вы, конечно, можете сказать «просто сделайте trigger(‘click’)», но это противоречит политике безопасности браузера (нельзя вызвать искусственно такого рода событие).

Поэтому для того, чтобы раскрыть select javascript нужно придумать что-нибудь другое. Что-то более системное. Но, судя по тому, что у других сайтов это работает, получится и у нас.

Итак, сначала нам нужно сделать нашу иконку меню, которая будет активировать выпадающий список, раскрыть select javascript.

<span class=select_show>Menu</span>

Естественно, вместо текста Menu можно поместить стандартную иконку гамбургера или что-нибудь ещё (что может говорить о том, что это меню), оформление для нас не так важно сейчас.

Ну и конечно, нам нужен сам select:

<select class=select>
<option val=1>Page1
<option val=2>Page2
<option val=3>Page3
</select>

Теперь обработаем клик по этой кнопке «меню». Обработаем на jQuery, но можно и по-другому.

$('.select_show').click(function({
showDropdown($('.select')[0]);
});

Итак, как видите, при клике на кнопку меню, всё, что мы делаем — вызываем другую функцию, передавая в неё указатель на нужный select, может же быть несколько select на странице.

Ну и теперь собственно сама эта функция, которая и будет раскрыть select javascript.

showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

Эта функция вызывает двойную симуляцию события mousedown, которая и отображает выпадающее меню.

Понравилась или помогла статья?
Купите мне кофеКупите мне кофе