Как отсортировать asc и desc с помощью list.js

Question

Я использую list.js для создания параметров поиска и сортировки с опциями выбора в выпадающем меню. Вот мой рабочий код:

JS:

var options = {
  valueNames: [ 'name' ]
};
var myList = new List('mylist', options);

$('select.sort').change(function(){
  var selection = $(this).val();
  myList.sort(selection);
});

HTML

<select class="sort">
    <option value="" selected>Sort by</option>
    <option value="name">Sort by Name</option>
</select>

Теперь я пытаюсь отсортировать "имя" с помощью ASC и DESC, например -

<select class="sort">
    <option value="" selected>Sort by</option>
    <option value="name">Name ASC</option>
    <option value="name">Name DESC</option>
</select>

Я нашел это в документах,

listObj.sort('name', { order: "asc" });
listObj.sort('name', { order: "desc" });

Но я не понимаю, как это сделать с помощью раскрывающегося списка. Можете ли вы помочь, пожалуйста?

Answer 1

Javascript:

$('.sort').on('change', function() {
   var col = $('.sort.column').val();
   var dir = $('.sort.direction').val();
   if ( col !== "" && dir != "" )
   {
       myList.sort(col, { order: dir });
   }
});

HTML:

<select class="sort column">
    <option value="" selected>Sort by</option>
    <option value="name">Sort by Name</option>
</select>
<select class="sort direction">
    <option value="" selected>Sort by</option>
    <option value="asc">ASC</option>
    <option value="desc">DESC</option>
</select>

Answer 2

Спасибо @FrankerZ!

В ванильном JS с 1 раскрытием.

  <select id="sort">
    <option value="">Select an option</option>
        <option value="name" sort="asc">Name ascending</option>
        <option value="name" sort="desc">Name descending</option>
        <option value="born" sort="asc">Born ascending</option>
  </select>

    var sort    = document.querySelector("#sort"); 
    sort.addEventListener("change", sortBySelect, false); 

    function sortBySelect(event) {
        selected = event.target.selectedOptions[0];
        sort = selected.attributes.value.value;
        dir = selected.attributes.sort.value;
        userList.sort(sort, { order: dir });
    }

Примечание: я просто новичок в JavaScript. Так что, если вы видите какие-либо улучшения возможно, не стесняйтесь ответить.