選擇框以更改網址

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

Answer 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。

Answer 3

像這樣？

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

Answer 4

加

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

到你的<select> 。

您可能還想在頂部添加一個空白選項。

Answer 5

$(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");
    });
});

試試吧。