変更があったときにオプションを選択したままにしておくと、ページをリロードする必要がありますか？

Question

私は、次の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ページがリロードされますのでSELECTがリセットされ、選択された値が「緩く」なるようにURLが変更されます。

私はこの問題を解決するには、2つの方法で考えることができます。以上です簡単なもの

グラブURLからband_idを複雑にし、選択したプロパティを設定するので、私はしたくないこれはAJAXを使用して

• ました私は達成する方法を知らない。

これを達成する方法は他にありません。あなたは他の考えを持っていますか？ （それが良い例での場合）

Answer 1

あなたはそのため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属性を変更する理由もわかりません。ユーザーをすぐに新しいページにリダイレクトします（この変更はまったく効果がありません）。