javascript - 选择框以更改网址

Question

我想使用选择来更改网址末尾的查询，以更改其排序选项。例如:

<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;
});

Here's an example ࢐ (它不会重定向，但你明白了......)

<小时/>

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

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