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

Решил вопрос самостоятельно.
Из 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

Разобрался самостоятельно.
Помогло добавление строки:
$('#rate').val(val).trigger('change');

Рабочий пример: https://jsfiddle.net/qsv0okh4/1/

Привет.
https://jsfiddle.net/k3dj37kt/

Для наглядности вывел в отдельный блок все что будет находится в data-large первой ссылки

Используйте .each()
Поправил ваш код, теперь работает все верно.
https://jsfiddle.net/v74w8t6w/2/

Используйте свойство CSS pointer-events: none;

Накидал на скорую руку небольшой прототип :)
https://jsfiddle.net/oaaoz55b/

P.S. Если это вам помогло, отметьте, пожалуйста, комментарий как решение.