我正在尝试将我的产品列表分类为名称或价格,我有一个javascript函数和一个选择/选项代码来做它,但我希望它是按钮而不是下拉列表。
<!-- 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>
这段代码可以这样做吗?