セレクトボックスからカテゴリーを選ぶと、選択したカテゴリーのトップへ移動します。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;
}
});
});