如何在更改選項時保留選項，並且需要重新加載頁面？

我有以下HTML選擇：如何在更改選項時保留選項，並且需要重新加載頁面？

<select class="form-control" id="band_id" name="band_id"> 
    <option selected="selected" value="">Choose a band...</option> 
    <option value="66">Adolfo Little</option> 
    <option value="96">Aisha Bosco</option> 
    <option value="90">Alize Glover</option> 
</select>

我需要建立一個過濾器，條件是#band_id選擇所以我做了這個jQuery代碼：

$("select#band_id").change(function (ev) { 
    ev.preventDefault(); 
    var band_id = $('select#band_id'); 

    if (band_id.val() != undefined) { 
     band_id.attr('selected', 'selected'); 
    } 

    location.href = '/albums/bands/' + band_id.val(); 
});

因爲location.href頁面被重新加載和URL更改，所以SELECT被重置，我「鬆動」選定的值。

我能想到的兩種方法來解決這個問題：

使用AJAX，我不希望因爲是在複雜的東西容易
抓鬥從URL中band_id，然後設置選擇屬性，該屬性我不知道如何實現。

我不知道是否有任何其他的方式來實現這一目標。你有其他想法嗎？（如果是用一個例子更好）

來源

2016-12-29 ReynierPM

你可以使用cookies，但我會親自去與阿賈克斯。既然你正在使用jQuery，它應該只是一個電話，目標是一個div –

cookie或localStorage是其他替代品 – charlietfl

您可以使用localStorage爲：

if (localStorage.getItem("band_id")) { 
    $("select#band_id").val(localStorage.getItem("band_id")) 
} 
$("select#band_id").change(function (ev) { 
    ev.preventDefault(); 

    if ($(this).val() != undefined) { 
     $(this).attr('selected', 'selected'); 
     localStorage.setItem("band_id", $(this).val()); 
    } 

    location.href = '/albums/bands/' + $(this).val(); 
});

如果我們有保存的價值 - 設置select元素，價值觀的價值。
一旦我們更改了select元素的值 - 將新值保存在localStorage中。

請注意，我從該示例中刪除了band_id的用法，因爲它不是必需的。您可以在change函數中使用this。

我也不知道爲什麼你改變selected屬性 - 你立即將用戶重定向到一個新的頁面（這一變化將完全沒有影響）。

來源

2016-12-29 01:03:56 Dekel

什麼是「選擇」？這對''

如何在更改選項時保留選項，並且需要重新加載頁面？

回答