【フォーム】select内optionのvalue値を取得してページ移動

セレクトボックスからカテゴリーを選ぶと、選択したカテゴリーのトップへ移動します。select内optionのvalue値をjQueryで取得し、window.location.hrefに代入することでリンクの動作を実現します。

htmlのコードは下記になります。
optionのvalueにカテゴリートップのURLを設定します。何も選択されていない「カテゴリーを選択してください」の項目はvalueを0に設定します。

<select id="select_search">
	<option value="0" selected="selected">カテゴリーを選択してください</option>
	<option value="/category/accordion/">アコーディオンメニュー</option>
	<option value="/category/tab/">タブメニュー</option>
	<option value="/category/fade/">フェーダー</option>
	<option value="/category/form/">フォーム</option>
	<option value="/category/hover/">マウスオーバー</option>
	<option value="/category/modal/">モーダルウィンドウ</option>
	<option value="/category/responsive/">レスポンシブ</option>
</select>

続いてCSSのコードです。セレクトボックスの装飾のみです。

#select_search {
	display: block;
	width: 300px;
	margin: 0 auto;
	padding: 5px;
	font-size: 100%;
	border: solid 1px #e1e1e1;
	border-radius: 3px;
}

最後にjQueryのコードです。
セレクトボックスからカテゴリーを選択した時の処理はchangeで記述します。optionのvalue値がそのままURLになります。

$(function() {
	$("#select_search").change(function() {
		var data = $(this).val();
		if(data != 0){
			window.location.href = data;
		}
	});
});
タイトルとURLをコピーしました