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

Пока ещё не закончилось лето, да собственно любое время года подойдет, нужен ремонт? Вот тут http://klimovsk.bez-remonta.net/ ремонт квартир в Климовске помогут сделать. Яркий, модный, оперативный и качественный.

Вы, конечно, можете сказать «просто сделайте 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, которая и отображает выпадающее меню.