如何使用 list.js 对 asc 和 desc 进行排序

Question

我正在使用 list.js 构建带有下拉 select 选项的搜索和排序选项，这是我的工作代码：

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 对 'name' 进行排序，例如 -

<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！

在带有 1 个下拉菜单的普通 JS 中。

  <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的新手。因此，如果您看到任何可能的改进，请随时回复。

如何使用 list.js 对 asc 和 desc 进行排序

How to sort asc and desc with list.js

html

jquery

listjs