mSearch2 - сортировка кастомным select 'ом

Возникла необходимость кастомизировать стандартную сортировку компонента mSearch2.
Cортировка имела следующий вид:
Как оказалось компонент не может работать с select, а работает только тегом a. Ну да ладно, попробуем исправить это.
На сайте modx.pro в ветке Вопросы нашел вопрос Как сделать сортировку через select? от пользователя DimenSi. Вопрос частично решен если бы не одно НО

перестали работать фильтры, фильтрация срабатывает только после сортировки. Т.е. меняешь ценовой диапазон → ничего, после этого меняешь сортировку → срабатывает и сортировка и фильтр.

ПЛАН РАБОТЫ

• Установка кастомного селеста
• Написание скрипта для взаимодействия сортировки с компонентом

Установка кастомного селеста

В качестве select'a будем использовать bootstrap-select. Инструкцию по установке можно посмотреть на сайте
В шаблон вставляем

<select class="selectpicker pull-right"  id="mse2_sort">
      <option class="sort" data-sort="ms$price" value="asc" data-icon="glyphicon-sort-by-attributes">По цене</option>
      <option class="sort" data-sort="ms$price" value="desc" data-icon="glyphicon-sort-by-attributes-alt">По цене</option>
    </select>

Наш select приобрел новый вид:


Элемент еще не может взаимодействовать с компонентом mSearch2.

Пишем скрипт взаимодействия сортировки с компонентом

Сам скрипт получился не объемный, я сам конечно не силен в js. Выношу его на обозрение.

$(document).ready(function() {
                               
                    $(document).on('change', '#mse2_sort', function() {
                        var selected = $(this).find('option:selected');
                        var sort = selected.data('sort');
                        sort += mse2Config.method_delimeter + selected.val();
                        mse2Config.sort =  sort;
                        mSearch2.submit();
                    });

        });

<option class="sort" data-sort="" value="">По умолчанию</option>

$(document).ready(function() {
                    $(document).on('change', '#mse2_sort', function() {
                        var selected = $(this).find('option:selected');
                        var sort = selected.data('sort');
                        if(sort!=""){
                            sort += mse2Config.method_delimeter + selected.val();
                        }else{
                            sort = '';
                        }
                        mse2Config.sort =  sort;
                        mSearch2.submit();
                    });

});

<select class="selectpicker pull-right" id="mse2_sort">
  <option class="sort" data-sort="ms|price" value="asc">По цене возр</option>
  <option class="sort" data-sort="ms|price" value="desc">По цене убыв</option>
  <option class="sort" data-sort="resource|pagetitle" value="asc">Название (А - Я)</option>
  <option class="sort" data-sort="resource|pagetitle" value="desc">Название (Я - А)</option>
</select>