遷移元のリンクURLパラメータを、遷移先のoptionの初期値に設定したい。

Question

実現したいこと

codepenを参考に学習してるのですが、selectのoptionタグの値を特定のルールで動的に変化させるコードで、これを他のぺージのリンクのURLパラメータを、遷移先formタグのoptionの初期値に設定して、初期値も含め動的に変化させる方法が知りたいです。

該当のソースコード

遷移元
<a href="form.html?area-select=沖縄">FORM</a>

↑
例) ?area-select=沖縄

の場合、プルダウンの<option>タグの初期選択項目を「沖縄」として設定したいです。
(対象のoptionにselectedをつけるなど。)

遷移先
  <form action="" method="post" name="area">
    <select name="area" id="area">
        <option value="関東">関東</option>
        <option value="関西">関西</option>
        <option value="沖縄">沖縄</option> //　←初期選択値にする
    </select>
    <select name="city" id="city"></select>
  </form>

var areaSelect = document.getElementById('area'); //
var CITIES = {
    '関東': ['東京', '神奈川', '千葉'],
    '関西': ['大阪', '京都', '滋賀'],
    '沖縄': ['鹿児島', '那覇']
};
areaSelect.addEventListener('change', function(e) {
    var citySelect = document.getElementById('city');
            citySelect.options.length = 0;
    if (areaSelect.selectedIndex) {
        var cityArr = CITIES[areaSelect.value];
        for (var i = 0; i < cityArr.length; i++) {
            citySelect.add(new Option(cityArr[i]));
        }
    }
});

参考
The MIT License (MIT)
Copyright (c) 2022 levonlin (https://codepen.io/levonlin/pen/YqGZEa)

わかりずらい質問かもしれませんが、よろしくお願いします。

Comments

[knuser1]

> 初期値も含め動的に変化させる方法が知りたいです。

要件が十分理解できていないかもしれませんが、Optionのコンストラクターの引数（defaultSelected, selected）で選択状態を指定するか、あるいは、生成したオブジェクトの属性（seleted）をJavaScriptのロジックの中で修正すれば、動的に変更はできると思うのですが、いかがでしょうか？

- https://developer.mozilla.org/ja/docs/Web/API/HTMLOptionElement/Option
- https://developer.mozilla.org/ja/docs/Web/HTML/Element/option#attr-selected

[gantamu]

ありがとうございます。yambejp様が教えてくれたコードを参考にやってみます。

Answer 1

こんな感じで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const s=location.search;
  const usp=new URLSearchParams(s);
  [...usp.entries()].forEach(x=>{
    const elm=document.querySelector(`select[name="${x[0]}"]`);
    if(elm){
      elm.value=x[1];
    }
  });
});
</script>

<a href="?area=%E6%B2%96%E7%B8%84">FORM</a>
<form>
<select name="area" id="area">
<option value="関東">関東</option>
<option value="関西">関西</option>
<option value="沖縄">沖縄</option>
</select>
<input type="submit" value="send">
</form>

Comments

[gantamu]

ありがとうございます。やってみます。