javascriptでselectboxでform送信後に選択したoptionにselectedをつけたい

Question

<section id="SearchBox"> 

<h2 class="">条件を指定して絞り込み</h2> 

<form action="./" method="post"> 

<select name="cat_id"> 

<option value="">ジャンル</option> 

<option value="01" >果物</option> 

<option value="02">野菜</option> 

<option value="03" >魚</option> 

</select>
<select name="c_tag"> 
</select>
<input name="planDate" value="" placeholder="日付" class="datepicker" size="8">
<button type="submit" name="btnSearch">検索</button>
<a href="./" class="btnClear">クリア</a>
</form>
</section>
<script> 

let c_tagArray = new Array(); 

c_tagArray[''] = new Array( 

['','さらに絞り込む'] 

); 

c_tagArray['01'] = new Array( 

['','果物すべて'], 

['K1','みかん'], 

['K2','りんご'], 

['K3','ばなな']

); 

c_tagArray['02'] = new Array( 

['','野菜すべて'], 

['Y1','トマト'], 

['Y2','ナス'], 

['Y3','ニンジン']

); 

c_tagArray['03'] = new Array( 

['','魚すべて'], 

['S1','マグロ'], 

['S2','サーモン'], 

['S3','アジ']

);

document.getElementsByName('cat_id')[0].onchange = function () {
let cat = this.value;
let elm = document.getElementsByName('c_tag')[0];
elm.options.length = 0;
for (let i = 0; i < c_tagArray[cat].length; i++) {
let op = document.createElement('option');
op.value = c_tagArray[cat][i][0];
op.textContent = c_tagArray[cat][i][1];
elm.appendChild(op);
}
};
window.onload = function () {
document.getElementsByName('cat_id')[0].onchange();
};
</script>

javascript初心者でコードは見つけたものをどうにか修正しました。
ジャンルを選択した際に選択したvalue値に応じて次のselectboxの
optionが生成されるようになっています。
ジャンルと小カテゴリを選択して検索した際に
選択した小カテゴリにselectedをつけて
検索結果のページでも選択状態を保持することは可能でしょうか？

ご教授頂ければ幸いです。
よろしくお願い致します。

Comments

[m.ts10806]

コードはマークダウンのcode機能にてご提示ください

[somen-]

失礼しました。
コードに挿入しました。

[m.ts10806]

そもそもhtmlのクォーテーションの使い方が正しくない状態で、
「送信後」とタイトルに書いたり、「絞り込み検索をする際に」と書いたり
「やりたいこと」が見えてきません。
どういう挙動を実現したいのか、順番で書いてもらっていいですか？

Answer 1

やり方はいくつかあります。

• サーバーサイドでselected状態のhtmlをレンダリングする。
• formタグのsubmitではなく、fetch apiやXMLHttpRequestを使用して画面遷移は行わず検索結果のみ更新する。
• onsubmitでLocalStrageや、SessionStrageに値を保存して、onload時に値を取り出してselectedにする。

以下サンプルコード

• formタグのsubmitではなく、fetch apiやXMLHttpRequestを使用して画面遷移は行わず検索結果のみ更新する。

<section id="SearchBox"> 
  <h2 class="">条件を指定して絞り込み</h2> 
  <form action="./" method="post"> 
    <select name="cat_id"> 
      <option value="">ジャンル</option> 
      <option value="01" >果物</option> 
      <option value="02">野菜</option> 
      <option value="03" >魚</option> 
    </select>
    <select name="c_tag"></select>
    <input name="planDate" value="" placeholder="日付" class="datepicker" size="8">
    <button type="button" name="btnSearch" onclick="searchByFetch()">検索</button>
    <a href="./" class="btnClear">クリア</a>
  </form>
</section>
<script> 

// 長いので元のソースは省略

function searchByFetch(){
  // nameとc_tagの値をjsonにする。
  const data = {  };

  fetch('https://example.com/profile', {
    body: JSON.stringify(data),
  })
  .then(response => response.json())
  .then(data => {
    //dataを検索結果表示場所にセットする処理
  });
}
</script>

• onsubmitでLocalStrageや、SessionStrageに値を保存して、onload時に値を取り出してselectedにする。

<section id="SearchBox"> 
  <h2 class="">条件を指定して絞り込み</h2> 
  <form action="./" method="post" onsubmit="storeSelectItem()"> 
    <select name="cat_id"> 
      <option value="">ジャンル</option> 
      <option value="01" >果物</option> 
      <option value="02">野菜</option> 
      <option value="03" >魚</option> 
    </select>
    <select name="c_tag"></select>
    <input name="planDate" value="" placeholder="日付" class="datepicker" size="8">
    <button type="submit" name="btnSearch">検索</button>
    <a href="./" class="btnClear">クリア</a>
  </form>
</section>
<script>
function storeSelectItem(){
  localStorage.setItem('cat_id', document.getElementsByName('cat_id')[0].selectedIndex);
  localStorage.setItem('c_tag', document.getElementsByName('c_tag')[0].selectedIndex);
}

window.onload = function () {
  document.getElementsByName('cat_id')[0].selectedIndex = localStorage.getItem('cat_id');
  document.getElementsByName('cat_id')[0].onchange();
  document.getElementsByName('c_tag')[0].selectedIndex = localStorage.getItem('c_tag');
};
</script>