0

Подскажите как сделать чтобы при клике по кнопке $(".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('');
});

В итоге получилось то что нужно: введите сюда описание изображения

1 ответ 1

0

Как-то так, что ли?

$(".dropdown__trigger").on("click", function () {
    var $wdg = $(this).closest(".dropdown"),
    		$menu = $wdg.find(".dropdown__menu"),
        $countBadge = $wdg.find('.badge'),
        $titleBadge = $wdg.find('.dropdown__title');
    $wdg.toggleClass("close");
    $menu.slideToggle("fast");

		changeSelect($(".droprown__select select"),$countBadge,$titleBadge);
});

var changeSelect = (elem, countBadge, titleBadge) => {
	elem.on("change", function (e) {
  	let selOption = $(e.target).find("option:selected")[0];
    if (selOption !== undefined) {
    	countBadge[0].innerText = selOption.value;
      titleBadge[0].innerText = selOption.label;
    }
  }).trigger("change");
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="1">Ваши акции</option>
        <option value="2">Настройки</option>
        <option value="3">Избранное</option>
        <option value="4">Ваша карта</option>
        <option value="5">Поддержка</option>
    </select>
</div>

4
  • Нет. Решил задачу самостоятельно. Из ul списка формируем optionдля select. С помощью CSS задаем для selectopacity: 0; и располагаем select поверх блока .dropdown__header.
    – Andrew
    30 окт 2019 в 8:58
  • А в чёс смысл? Если не секрет...
    – InDevX
    30 окт 2019 в 9:58
  • Вызывать select по внешнему элементу запрещено стало: chromestatus.com/features/5718803933560832 Смысл в том, что select наложил поверх стилизованного блока и задал ему прозрачность 0. Это позволяет при клике по лжеэлементу вызвать нативный dropdown select.
    – Andrew
    31 окт 2019 в 13:28
  • Это вы работу описали, а не смысл.
    – InDevX
    31 окт 2019 в 13:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.