Как раскрыть SELECT при помощи Javascript?

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

Как раскрыть SELECT при помощи Javascript?

» » Сообщение:

Для мобильных
Сначала нам нужно сделать нашу кнопку меню, которая будет активировать выпадающий список, раскрыть select:

Код: Выделить всё Развернуть
<span class=select_show>Menu</span>

Вместо текста Menu можно поместить стандартную иконку или что-нибудь еще.

Сам select:

Код: Выделить всё Развернуть
<select class=select>
<option val=1>Page1</option>
<option val=2>Page2</option>
<option val=3>Page3</option>
</select>

Обработчик клика на jQuery:

Код: Выделить всё Развернуть
$('.select_show').click(function(){
showDropdown($('.select')[0]);
});

Сама эта функция, которая и будет раскрыть select:

Код: Выделить всё Развернуть
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

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

Весь код:

Код: Выделить всё Развернуть
<span class=select_show>Menu</span>
<select class=select>
<option val=1>Page1</option>
<option val=2>Page2</option>
<option val=3>Page3</option>
</select>
<script type="text/javascript">
$('.select_show').click(function(){
   var event = document.createEvent('MouseEvents');
   event.initMouseEvent('mousedown', true, true, window);
   $('.select')[0].dispatchEvent(event);
});
</script>
активировать, select, javascript, развернуть, выпадающий, список


Re: Как раскрыть SELECT при помощи Javascript?

Admin » » Сообщение:

ironfist писал(а) › 14 сен 2016, 18:52:А как быть с тем, что использование dispatchEvent не рекомендовано и ориентировочно будет выпилено в сентябре 2016 года?

Эмулировать

Код: Выделить всё Развернуть
<span class=select_show id="click">Menu</span>
<select class=select id="ts">
<option val=1>Page1</option>
<option val=2>Page2</option>
<option val=3>Page3</option>
</select>
<script type="text/javascript">
$("#click").on('click', function() {
      var target = $("#ts"),clone = target.clone().removeAttr('id');
      clone.val(target.val()).css({
            overflow: "auto",
            position: 'absolute',
            'z-index': 999,
            left: target.offset().left,
            top: target.offset().top + target.outerHeight(),
            width: target.outerWidth()
      }).attr('size', clone.find('option').length > 10 ? 10 : clone.find('option').length).change(function() {
            target.val(clone.val());
      }).on('click blur',function() {
            $(this).remove();
      });
      $('body').append(clone);
      clone.focus();
});
</script>




Похожие темыКомментарии ПросмотрыПоследнее сообщение
0648JavaScript. Логические операторы и ...
Сообщение от: Admin
3900BBComplex - Классы для каскадных та...
Сообщение от: Admin
0463JavaScript методы alert, document.w...
Сообщение от: Admin
02230Предпросмотр картинки перед загрузк...
Сообщение от: Admin
078Вывод страницы на печать, версия дл...
Сообщение от: likbezz