【JavaScript】selectタグで選択した値を保持したまま、ページ遷移させる方法

2024.10.21

【JavaScript】selectタグで選択した値を保持したまま、ページ遷移させる方法

indexページ等から、都道府県や、店舗など一旦選択し、その値を保持した状態でお問い合わせフォーム等へページ遷移させる方法をご紹介します。

使うことは少ないかもしれませんが、いざという時の為にどうぞ。

リンク元ページの記載方法（01.html）

<form id="myForm">
    <label for="mySelect">選択項目:</label>
    <select id="mySelect">
      <option value="">選択してください</option>    
      <option value="option1">選択：01</option>
      <option value="option2">選択：02</option>
      <option value="option3">選択：03</option>
    </select>
    <button type="button" onclick="goToPage2()">次のページへ</button>
</form>

<script>
function goToPage2() {
  var selectElement = document.getElementById('mySelect');
  var selectedValue = selectElement.value;
  window.location.href = '02.html?selected=' + encodeURIComponent(selectedValue);
}
</script>

リンク先ページの記載方法（02.html）

<form id="myForm">
  <label for="mySelect">選択項目:</label>
  <select id="mySelect">
    <option value="">選択してください</option> 
    <option value="option1">選択：01</option>
    <option value="option2">選択：02</option>
    <option value="option3">選択：03</option>
  </select>
</form>

<script>
// URLパラメータを取得する関数
function getQueryParam(param) {
  var urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
}

// ページ読み込み時に選択された値を設定する
window.onload = function() {
  var selectedValue = getQueryParam('selected');
  if (selectedValue) {
    var selectElement = document.getElementById('mySelect');
    selectElement.value = selectedValue;
  }
};
</script>