選択したセレクトボックスをページ更新後に選択状態にしたい

Question

セレクトボックスを使った検索システムを作っています。
ユーザーが選択したセレクト項目を、検索後のページで選択されている状態にしたいです。

<select name="type"> <option value="1">レッド</option> <option value="2">ブルー</option> <option value="2">グリーン</option> </select>

現在の方法は

<script type="text/javascript"> $("select[name='type'] option[value='<?php echo $type; ?>']").attr("selected",true); </script>

1.phpでセレクトされた項目の値を取得
2.変数$typeに代入
3.jqueryでoptionの値に変数$typeをセットして、attrで属性selectedを追加
で選択されたものを検索後のページで選択状態にしていました。

しかし上のコードの様に、「違う項目名だが値は一緒」というケースなので、どうチェックを付ければいいか困っています。
例えば「ブルー」をチェックしたとしても値が一緒なため検索後のページでは「グリーン」が選択された状態になってしまうという具合です。

宜しくお願いします。

Answer 1

optionのindexを調べて、cookieなり、sessionStorageになりに保管して、検索後再適用するというのはどうでしょう？
あるいは検索自体をajaxでして、任意のブロックに結果を表示するなどして、ページ全体をリロードさせなければoptionの値は保てると思います。

Answer 2

違う項目名だが値は一緒・・・ってあまりありえないですけどね

<select name="type"> <option value="1">レッド</option> <option value="2">ブルーまたはグリーン</option> </select>

としませんか？

Answer 3

option の value が同じという実装自体を変更されるのが手早いです。

<option value="r_1">
<option value="b_2">
<option value="g_2">
```もしくは、
```HTML
<input type="hidden" name="hidden_color" value="<?php echo $hidden_color; ?>">

$( "select[name='type']" ).change( function() {
	$( "input[name='hidden_color']" ).val( $( this ).val() );
} );

としてPHP側に「ブルー」を送るとか。