💡
前のページに基づいてセレクトボックスの値を設定する
サンプルコード
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;
-
document.referrer
によって前の(リンク元)のページのフルパスを取得 - URLオブジェクトに変換
-
.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