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

実現したいこと

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

該当のソースコード

HTML

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


例) ?area-select=沖縄

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

HTML

1遷移先 2 <form action="" method="post" name="area"> 3 <select name="area" id="area"> 4 <option value="関東">関東</option> 5 <option value="関西">関西</option> 6 <option value="沖縄">沖縄</option> // ←初期選択値にする 7 </select> 8 <select name="city" id="city"></select> 9 </form>

JavaScript

1var areaSelect = document.getElementById('area'); //2var CITIES = {3 '関東': ['東京', '神奈川', '千葉'],4 '関西': ['大阪', '京都', '滋賀'],5 '沖縄': ['鹿児島', '那覇']6};7areaSelect.addEventListener('change', function(e) {8 var citySelect = document.getElementById('city');9 citySelect.options.length = 0;10 if (areaSelect.selectedIndex) {11 var cityArr = CITIES[areaSelect.value];12 for (var i = 0; i < cityArr.length; i++) {13 citySelect.add(new Option(cityArr[i]));14 }15 }16});

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

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

コメントを投稿

0 コメント