Javascript 如何使用html select元素的值对Shopify liquid中的集合进行排序

我有以下html选择元素：

<div class="sort-collection-by">
<label for="sort-by">Sort by</label> 
<select id="sort-by">
    <option value="manual">Featured</option>
    <option value="price-ascending">Price: Low to High</option>
    <option value="price-descending">Price: High to Low</option>
    <option value="title-ascending">A-Z</option>
    <option value="title-descending">Z-A</option>
    <option value="created-ascending">Oldest to Newest</option>
    <option value="created-descending">Newest to Oldest</option>
    <option value="best-selling">Best Selling</option>
</select>
</div>

我希望在select元素值更改时立即执行排序操作

谢谢你的帮助。

以下是我的建议

（来自上述教程）显示了如何将事件处理程序绑定到“排序依据”下拉列表中的“更改”事件，从而在dropodown中的选定值更改时触发排序：

jQuery('#sort-by').bind('change', function() {
  Shopify.queryParams.sort_by = jQuery(this).val();
  location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
});

需要在Javascript中执行此操作的原因是，Liquid在服务器端呈现，因此：

{% assign sorted_products = collection.products | sort: SELECT_CHOICE_HERE %}

---

…将在用户有机会从下拉菜单中选择选项之前已呈现。这里需要Javascript来处理客户端的用户事件。

在这里发布之前，您应该检查shopify文档@FunkDoc-这个链接没有解决我的问题。我在尝试一个不同的实现。仍然在想是否有可能按照我建议的方式来做。另外，我可能错了，但我认为StackExchange建议不要通过告诉人们“谷歌”或去其他地方来回应。谢谢你的解释。我不能遵循该教程，因为我的集合在一个页面中，URL查询参数对其排序没有影响。我不介意使用Javascript，但我需要一个不同的方法（不基于查询字符串）。还有什么其他选择？（液体和Javascript对我来说都是新的。）@MountainX这使它变得更复杂。你能不能用一个新的方法来代替将集合放在一个页面中？这将是我认为最简单的选择。我想我可以，但我主要是想学习一些关于Liquid和jQuery的知识。如果最终的答案是，没有办法直接将select选项作为液体的一部分传递，那么这就是我想要的答案。然而，如果有一种创造性的方式来做我正在尝试的事情，我会很感激知道这一点。谢谢。@MountainX确实无法将用户的选择传递给Liquid（因为Liquid在页面呈现给用户之前呈现在服务器端）。另一种方法是使用AJAX请求，然后从返回的HTML获取产品，但这也不简单。

{% assign sorted_products = collection.products | sort: SELECT_CHOICE_HERE %}