选择框以更改网址

时间:2011-03-16 22:58:40

标签: javascript jquery wordpress sorting

我想使用select更改url末尾的查询来更改它的排序选项。 e.g:

<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来实现这一目标。感谢。

5 个答案:

答案 0 :(得分:5)

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

$('#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 ࢐(它没有重定向,但你明白了......)


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

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

答案 1 :(得分:2)

我不太确定你为什么不只是使用类似的东西:

<form method="GET">
    <input type="hidden" name="query" value="..." />

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

    <input type="submit" value="Sort" />
</form>

而且,对于JS,如果有的话,只需:

$('#sort').change(function() {
    $(this).parents('form').submit();
});

然后,您不需要任何人启用JavaScript。

答案 2 :(得分:1)

喜欢这个吗?

$("#sort").change(function(){
  window.location = $(this).find("option:selected").val();
});

答案 3 :(得分:0)

添加

onchange="if (this.value && /^\?/.test(this.value)) location = location.path + this.value"

<select>

您可能也希望在顶部添加一个空白选项。

答案 4 :(得分:0)

$(function() {
   $("#sort").change(function() {
     var myVal = $(this).val();
     window.location = "www.mywebsite.com/"+ myVal;
   });
   var qs = window.location.pathname;
   $("#sort option").each(function() {
       if(qs.contains($(this).val()))
        $(this).addAttr("selected","selected");
    });
});

试试。