Javascript 重定向用于产品排序的URL

我试图将我的产品列表按名称或价格进行排序，我有一个javascript函数和一段select/option代码，但我希望它是一个按钮，而不是一个下拉列表

<!-- A script to pick up the change event on the drop-down list below and redirect to the option selected's value. -->
<script type="text/javascript">
    $(document).on('change', 'select[data-sort-redirect]', function(){
    path = window.location.pathname + '?' + $(this).val(),
    baseUrl = window.location.protocol + '//' + window.location.host;
    window.location = baseUrl + path;
    });
</script>
<!-- A drop-down list with hard-coded values.  -->
<select data-sort-redirect>
    <option id="1" value="orderBy=base_price&order=asc"{% if sortField == 'base_price' and sortOrder == 'asc'  %} selected="selected"{% endif %}>Price - Ascending</option>
    <option id="2" value="orderBy=base_price&order=desc"{% if sortField == 'base_price' and sortOrder == 'desc'  %} selected="selected"{% endif %}>Price - Descending</option>
    <option id="3" value="orderBy=name&order=asc"{% if sortField == 'name' and sortOrder == 'asc'  %} selected="selected"{% endif %}>Name - Ascending</option>
    <option id="4" value="orderBy=name&order=desc"{% if sortField == 'name' and sortOrder == 'desc'  %} selected="selected"{% endif %}>Name - Descending</option>
    <option id="5" value="orderBy=sku&order=asc"{% if sortField == 'sku' and sortOrder == 'asc'  %} selected="selected"{% endif %}>SKU - Ascending</option>
    <option id="6" value="orderBy=sku&order=desc"{% if sortField == 'sku' and sortOrder == 'desc'  %} selected="selected"{% endif %}>SKU - Descending</option>
    <option id="7" value="orderBy=created_at&order=asc"{% if sortField == 'created_at' and sortOrder == 'asc'  %} selected="selected"{% endif %}>Date Created - Ascending</option>
    <option id="8" value="orderBy=base_price&order=desc"{% if sortField == 'created_at' and sortOrder == 'desc'  %} selected="selected"{% endif %}>Date Created - Descending</option>
</select>

$（文档）。在（'更改'，'选择[数据排序重定向]'，函数（）上{
path=window.location.pathname+'？'+$（this.val（），
baseUrl=window.location.protocol+'/'+window.location.host；
window.location=baseUrl+path；
});
涨价
降价
名称-升序
名称-降序
SKU-递增
SKU-下降
创建日期-升序
创建日期-递减

---

使用此代码是否可以执行此操作？

每当更新

文档位置时，浏览器将尝试导航到新值所在的位置。所以，有点像是的，但您需要移除“
选择
”功能的所有积垢，并将其转换为“
按钮
”功能。不要忘记，
选择
本身需要转换为一个
按钮列表
。您只需要名称和价格按钮吗？不是sku和日期？