アーカイブ2ページ目以降のセレクトボックスの値を指定したい

前提・実現したいこと

wordpressにてカスタム投稿ターム別のアーカイブを作成しました。

カスタム投稿：news
タクソノミー :news_category
ターム：apple:りんご、banana:ばなな、peach:もも

セレクトボックスでターム間をページ移動できるようにしております。

その際に、タームに応じてセレクトボックスの初期値がタームで表示されるようにしております。
（例：ばななというターム一覧[http//:example/news/banana/]ならセレクトボックス内のばななが設定されている）
これは下記コードにて実装できました。

発生している問題・エラーメッセージ

しかし、ページ送りをした際にはセレクトボックスがリセットされ、ばななが設定されず困っております。
（[http//:example/news/banana/page/2/]だと「ばなな」が選択された状態で表示されない。）

有識者の方がいらっしゃいましたら、ご教授いただけますと嬉しいです。
宜しくお願い致します。

該当のソースコード

<div class="select_cat">
    <p class="select_tit">カテゴリー</p>
    <?php // ターム一覧をプルダウンメニューで表示
    $taxonomy_slug = 'news_category'; // タクソノミーのスラッグを指定
    $terms = get_terms($taxonomy_slug); // タームの取得
    if ($terms && !is_wp_error($terms)) { // タームがあれば表示
        echo '<select id="cat_link" name="select" onChange="location.href=value;">'; // option の value 値を URL とする
        echo '<option value="' . esc_url(home_url('/news/')) . '">' . '全て' . '</option>';
        foreach ($terms as $value) { // 配列の繰り返し
            echo '<option value="' . get_term_link($value->slug, $taxonomy_slug) . '">' . esc_html($value->name) . '</option>'; // タームのURLとタイトルを表示
        }
        echo '</select>';
    }
    ?>
</div>

<script>
    //#cat_linkの初期値設定
    window.addEventListener('pageshow', () => {
        document.querySelectorAll('#cat_link option').forEach(x => {
            var a = Object.assign(document.createElement('a'), {
                href: x.value
            });
            if (location.href == a.href) {
                x.selected = true;
            };
        });
    });
</script>