💡

前のページに基づいてセレクトボックスの値を設定する

2023/06/28に公開

サンプルコード

const Before = new URL(document.referrer).pathname;
const Select = document.getElementsByName("select")[0];

console.log(Before);
switch (Before) {
  case "/recruit/":
    Select.value = "採用について";
    break;
  case "/company/":
    Select.value = "事業内容について";
    break;
  default:
    break;
}

このコードのキモは、この部分。

const Before = new URL(document.referrer).pathname;
  1. document.referrerによって前の(リンク元)のページのフルパスを取得
  2. URLオブジェクトに変換
  3. .pathnameでpath部分のみを取得

正規表現とかで文字を切り出すよりも楽で正しい実装だと思う。
主にフォームの実装で便利。

動かなかったら

明示的にcheckedを付けてみるバージョン。

const Before = new URL(document.referrer).pathname;
const Select = document.getElementsByName("select");

console.log(Before);
switch (Before) {
  case "/recruit/":
    Select[0].value = "採用について";
    [...Select].forEach(e => {
        e.checked = e.value === "採用について";
    });
    break;
  case "/company/":
    Select[0].value = "事業内容について";
    [...Select].forEach(e => {
        e.checked = e.value === "事業内容について";
    });
    break;
  default:
    break;
}

余談

「js get url history」とかで検索しちゃったのでdocument.referrerにたどり着くのが難しかった。

Discussion