How to sort asc and desc with list.js

Question

I'm using list.js to build a search and sort option with dropdown select options, Here is my working code:

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>

Now i'm trying to sort 'name' with ASC and DESC, for example -

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

I found this on the docs,

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

But I don't understand how to do this with above dropdown. Can you help please?

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>