1

我正在使用 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" });

但我不明白如何使用上面的下拉菜单来做到这一点。你能帮忙吗？

4

2 回答 2

0

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

于 2019-03-11T12:03:28.770 回答
0

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>
于 2017-04-28T07:18:26.970 回答