GETフォームのセレクトボックスで選択値を保持したまま検索結果を表示する方法

公開日: 2022.01.08
最終更新日: 2026.07.17

WordPressの記事を、セレクトボックスでカテゴリー絞り込み検索したい——よくある要望です。ただ、GET送信のフォームだと、検索後に遷移したページでセレクトボックスの選択が初期状態に戻ってしまい、「今どの条件で絞り込んでいるのか」が分からなくなります。

結論から言うと、JavaScriptでURLのパラメータを読み取り、対応するoptionにselectedを付け直すことで、選択した値を保持したまま検索結果ページを表示できます。この記事では、そのHTMLとJSを解説します。

1 HTML：選択した瞬間に検索するフォーム
2 なぜ選択が保持されないのか
3 JS：URLパラメータから選択を復元する
4 コードのポイント
5 まとめ

HTML：選択した瞬間に検索するフォーム

まず、フォームのHTMLです。今回は検索ボタンを置かず、項目が選択された時点で検索がかかるようにしています（onchangeで自動送信）。

<form method="get" id="search_form" action="">
    <div class="select-wrap">
        <select id="submit_select" name="term_select" onchange="submit(this.form)">
            <option value=""></option>
            <option value="0">すべて</option>
            <option value="cat_1">カテゴリー1</option>
            <option value="cat_2">カテゴリー2</option>
            <option value="cat_3">カテゴリー3</option>
        </select>
    </div>
</form>

なぜ選択が保持されないのか

フォームのmethodがPOSTではなくGETの場合、選択した値はURLのパラメータ（?term_select=cat_1のような形）として送られます。ページが再読み込みされると、セレクトボックスはHTMLに書かれた初期状態で描画されるため、選択していた項目の情報はセレクトボックス自体には残りません。

そこで、URLに付いているパラメータをJavaScriptで読み取り、その値に一致するoptionを選択状態にし直してあげます。

JS：URLパラメータから選択を復元する

<script>
    function getUrlVars() {
        var vars = {};
        var param = location.search.substring(1).split('&');
        for (var i = 0; i < param.length; i++) {
            var keySearch = param[i].search(/=/);
            var key = '';
            if (keySearch != -1) key = param[i].slice(0, keySearch);
            var val = param[i].slice(param[i].indexOf('=', 0) + 1);
            if (key != '') vars[key] = decodeURI(val);
        }
        return vars;
    }
    $(function () {
        var val = getUrlVars();
        var term_select = val.term_select;
        if (term_select) {
            var now_select = $("#submit_select").find("option[value=\"" + term_select + "\"]");
            $(now_select).prop('selected', true);
        }
    });
    $(function () {
        $("#submit_select").change(function () {
            $("#search_form").submit();
        });
    });
</script>

コードのポイント

getUrlVars()は、URLのクエリ文字列（?以降）を解析して、キーと値のペアを取り出す関数です。ここで取り出したterm_selectの値と一致するoptionを探し、prop('selected', true)で選択状態にしています。これにより、ページ遷移後もセレクトボックスに選んだ項目が表示されたまま残ります。

なお、このコードはjQueryを使っているため、jQueryが読み込まれている環境で動作します。valueの値（cat_1など）は、実際の絞り込み条件に合わせて設定してください。

ちなみに、URLパラメータの取得は、今ならURLSearchParamsを使うともっと簡潔に書けます（new URLSearchParams(location.search).get('term_select')）。上記は幅広い環境で動く書き方ですが、モダンブラウザだけを対象にするならURLSearchParamsもおすすめです。

また、検索ボタンをなくしてonchangeで自動送信すると、ユーザーはワンアクションで絞り込めます。ただし、選択と同時にページが切り替わるため、複数の条件をまとめて指定させたいフォームでは、あえて検索ボタンを残す判断もあります。フォームの目的に合わせて選ぶとよいでしょう。