选择框以更改网址

Question

我想使用select来更改url末尾的查询以更改它的排序选项.例如:

<select id="sort"> 
    <option value="?order_by=date">Recent</option> 
    <option value="?order_by=random">Popular</option>
    <option value="?order_by=random">Random</option> 
    <option value="">Staff Picks</option>
</select>

因此,例如默认情况下,帖子列表将按日期显示,然后如果用户选择一个选项,它将使用URL末尾的查询字符串重新加载页面.如果可能的话,希望使用jQuery来实现这一目标.谢谢.

Answer 1

将处理程序附加到选择框的更改事件,该选择框将所选选项的值添加到当前窗口位置,其后的所有内容都是？剪掉了:

$('#sort').change(function(e){
    var locAppend = $(this).find('option:selected').val(),
        locSnip   = window.location.href.split('?')[0];

    window.location.href = locSnip + locAppend;
});

这是一个例子࢐(它没有重定向,但你明白了......)

要在页面加载时选择适当的值,可以在绑定更改处理程序之前运行以下函数:

function selectCurSort() {
    var match = window.location.href.split('?')[1];
    $('#sort').find('option[value$="'+match+'"]').attr('selected',true);
}
selectCurSort();