Подскажите как сделать чтобы при клике по кнопке $(".dropdown__trigger) вызывался нативный select (для мобильных)? При выборе планирую подставлять значение value и data-label в элементы класса .dropdown__header
<div class="s-widget__dropdown dropdown">
<div class="dropdown__header">
<span class="dropdown__badge badge">32</span>
<span class="dropdown__title">Ваши акции</span>
<button class="dropdown__trigger"></button>
</div>
<div class="dropdown__menu">
<ul class="dropdown__list">
<li class="dropdown__item dropdown__item--active"><a href="#" class="dropdown__link">Ваши акции</a> <span class="badge">32</span></li>
<li class="dropdown__item"><a href="#" class="dropdown__link">Настройки</a></li>
<li class="dropdown__item"><a href="#" class="dropdown__link">Избранное</a></li>
<li class="dropdown__item"><a href="#" class="dropdown__link">Ваша карта</a></li>
<li class="dropdown__item"><a href="#" class="dropdown__link">Поддержка</a></li>
</ul>
</div>
<div class="droprown__select">
<select name="menu" id="menu">
<option value="Ваши акции">Ваши акции</option>
<option value="Настройки">Настройки</option>
<option value="Избранное">Избранное</option>
<option value="Ваша карта">Ваша карта</option>
<option value="Поддержка">Поддержка</option>
</select>
</div>
Сейчас есть такие наработки:
$(".dropdown__trigger").on("click", function () {
var $wdg = $(this).closest(".dropdown");
var $menu = $wdg.find(".dropdown__menu");
$wdg.toggleClass("close");
$menu.slideToggle("fast");
$(".droprown__select select").trigger('change'); // 'change', 'click' не работает
});
$(".droprown__select select").on("change", function () {
var label = $(this).find(":selected").data('label');
// получаю значения data-label в выбранном option
if (label !== undefined) console.log( $(this).find(":selected"), label );
});
UPDATE: Решил самостоятельно: Из ul списка формируем option для select. С помощью CSS задаем для select opacity: 0; и располагаем select поверх блока .dropdown__header.
<div class="s-widget__dropdown dropdown">
<div class="dropdown__header">
...
</div>
<select class="dropdown__select" name="dropdown_menu"></select>
<div class="dropdown__menu">
<ul class="dropdown__list">
<li class="dropdown__item"><a href="#" class="dropdown__link">Ваши акции</a> <span class="badge">32</span></li>
<li class="dropdown__item dropdown__item--active"><a href="#" class="dropdown__link">Настройки</a></li>
...
</ul>
</div>
Далее написал обработчик для всего меню
if ( $('.dropdown__list').length > 0 ) {
// собираем select из пунктов меню .dropdown__list
$('.dropdown__list').find('.dropdown__item').each(function () {
var $item = $(this);
var $link = $item.find('.dropdown__link');
var badge = $item.find('.badge').length > 0 ? $item.find('.badge').text() : '';
var title = $link.text();
var url = $link.attr('href');
var $option = '<option value="'+title+'" data-value="'+badge+'" data-url="'+url+'">'+title+'</option>';
$('.dropdown__select').append($option);
});
var $badge = $('.dropdown__badge');
var $title = $('.dropdown__title');
var $activeItem = $('.dropdown__list').find('.dropdown__item--active');
// Активному пункту меню добавляем selected
$('.dropdown__select option[value="'+$activeItem.find('.dropdown__link').text()+'"]').attr('selected', true);
// Подставляем название активного пункта меню в .dropdown__header
$title.text($activeItem.find('.dropdown__link').text());
// Отображаем badge если он существует
$activeItem.find('.badge').length > 0 ? $badge.text($activeItem.find('.badge').text()).css('visibility', 'visible') : $badge.css('visibility', 'hidden');
}
$(".dropdown__select").on("change", function () {
var $badge = $('.dropdown__badge');
var $title = $('.dropdown__title');
var $current = $(this).find(":selected");
var url = $current.data('url');
var badge = $current.data('value');
// Подставляем название активного пункта меню
$title.text($current.text());
// Переходим по ссылке
if (url.length > 0) location.href = url;
if (badge !== undefined && badge !== '')
$badge.text(badge).css('visibility', 'visible');
else $badge.css('visibility', 'hidden').text('');
});