select ボックスで選択した値を保持したまま検索結果のページを表示する

WordPress の記事をカテゴリー検索する際に、selectボックスを使って絞り込み検索をしたい時ってありますよね。

そんな時に便利です。

form の method が POST ではなく、GET の場合には javascript で切り替える必要があるようです。

選択された項目に “selected” が付与されるようにしています。

今回は検索ボタンも無くして、項目が選択された時点で検索をかけるようにしています。

<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>

<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>