実現したいこと
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 コメント