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

Question

[Андрей Александрович]

Привет!

Ребята, подскажите как сделать чтобы при клике по элементу $(".dropdown__trigger) вызывался select?
При выборе <option> планирую подставлять значение 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>
</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');
    if (label !== undefined) console.log( $(this).find(":selected"), label );
});

Comments

[Николай Чуприк]

Не совсем понятна логика работы, которую вы хотите получить. При клике на кнопку вам надо получить данные о выбранном в настоящее время значении select?

[Андрей Александрович]

Николай Чуприк, при клике по кнопке нужно вызвать select (чтобы открывались опции). И выбранную опцию занести в блок .dropdown__header.

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

Answer 1

[Андрей Александрович]

Решил вопрос самостоятельно.
Из ul списка формируем optionдля select. С помощью CSS задаем для selectopacity: 0; и располагаем select поверх блока .dropdown__header.

<div class="s-widget__dropdown dropdown">
    <div class="dropdown__header">
        <div class="dropdown__badge badge">32</div>
        <div class="dropdown__title">Ваши акции</div>
        <button class="dropdown__trigger"></button>
    </div>
    <select class="dropdown__select" name="dropdown_menu"></select>
    <div class="dropdown__menu">
        <ul class="dropdown__list">
            <li class="dropdown__item"><a href="lk-user-discounts.html" class="dropdown__link">Ваши акции</a> <span class="badge">32</span></li>
            <li class="dropdown__item dropdown__item--active"><a href="lk-user-settings.html" class="dropdown__link">Настройки</a></li>
            <li class="dropdown__item"><a href="#" class="dropdown__link">Избранное</a><span class="badge">12</span></li>
            <li class="dropdown__item"><a href="lk-user-card.html" class="dropdown__link">Ваша карта</a></li>
            <li class="dropdown__item"><a href="lk-user-support.html" class="dropdown__link">Поддержка</a></li>
        </ul>
    </div>
</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('');
});

В итоге получаем вот такое мобильное меню с выбором нативного select

Answer 2

[Николай Чуприк]

$( ".dropdown__trigger" ).on( "click", function () {
   // ...
   let sel = $( ".droprown__select select" );
   sel.click(); // Раскроет селект
   $( "dropdown__header" ).append( "<span>" + sel.val() + "</span>" );  //  Подставит значение после кнопки. Если надо в другом порядке вставлять, сами разберётесь
});

Comments

[Андрей Александрович]

Николай, такой вариант я пробовал. sel.click(); не раскрывает список.