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排序'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进行排序

2 个答案: