MW WP Form 動的にセレクトを表示させる方法について

WordpressのプラグインでMW WP Formを使用してフォームの作成をしておりますが、
行き詰まったのでご教授いただけますと幸いです。

現在セレクトボックスのコーディング部分ですが、
親のセレクトボックスの選択項目によって子のセレクトボックスの項目を変更するところまではできております。

問題点としては、バリデーションチェックが入ってリロードさせた時にグレード選択の項目が空になってしまいます。
sessionStorage.setItemなど使用してセッションに保存して再度呼び出してみましたがうまくいきませんでした。

なにか解決できる方法などがあればよろしくお願い致します。

javascript
1jQuery(function ($) {
2
3  //グレード選択項目
4  let car_list = {
5    アルファード30: [
6      '2.5X',
7      '2.5S',
8      '2.5S タイプブラック',
9      '2.5S Aパッケージ',
10      '2.5S Cパッケージ',
11      '3.5G Fパッケージ',
12      '3.5S Cパッケージ',
13      '3.5 エグゼクティブラウンジ',
14      '3.5 エグゼクティブラウンジS'
15    ],
16
17    アルファード20: [
18      '240X',
19      '240S',
20      '240G',
21      '240S Cパッケージ',
22      '240S G\'Z',
23      '240S タイプゴールド',
24      '350S',
25      '350S タイプゴールドⅡ',
26      '350S Cパッケージ',
27      '350GL Lパッケージ',
28      '350G プレミアムシートパッケージ',
29      '350S プレミアムシートパッケージ',
30    ],
31
32    ヴェルファイア30: [
33      '2.5X',
34      '2.5Z',
35      '2.5Z Aエディション ゴールデンアイズ',
36      '2.5Z Aエディション',
37      '2.5Z Gエディション',
38      '3.5V Lエディション',
39      '3.5ZA 3.5ZA Gエディション',
40      '3.5エグゼクティブラウンジ',
41      '3.5エグゼクティブラウンジS',
42    ]
43
44$('select[name="car_name"]').change(function () {
45    $('select[name="car_grade"] option:nth-of-type(n+2)').remove();
46    let res = $(this).val();
47
48    if (res == 'アルファード（30系）') {
49      $.each(car_list['アルファード30'], function (index, value) {
50        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
51      });
52    } else if (res == 'アルファードハイブリッド（30系）') {
53      $.each(car_list['アルファードハイブリッド30'], function (index, value) {
54        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
55      });
56    } else if (res == 'アルファード（20系）') {
57      $.each(car_list['アルファード20'], function (index, value) {
58        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
59      });
60    } else if (res == 'アルファードハイブリッド（20系）') {
61      $.each(car_list['アルファードハイブリッド20'], function (index, value) {
62        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
63      });
64    } else if (res == 'ヴェルファイア（30系）') {
65      $.each(car_list['ヴェルファイア30'], function (index, value) {
66        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
67      });
68  });
69});
70

HTML
1<dl>
2<dt>車種<span>必須</span></dt>
3 <dd>
4  <div>[mwform_select name="car_name" children=":選択してください,アルファード（30系）,アルファードハイブリッド（30系）,アルファード（20 
5  系）,アルファードハイブリッド（20系）,ヴェルファイア（30系）,ヴェルファイアハイブリッド（30系）,ヴェルファイア（20系）,ヴェルファイアハイブリッ 
6  ド（20系）,レクサスRX（20系）,レクサスRX（10系）,レクサスNX,エルグランド,エスティマ,エスティマハイブリッド,ハリアー（60系）,ハリアー（30 
7  系）,VOXY,レクサスNX" post_raw="true" show_error="false"]</div>
8 [mwform_error keys="car_name"]
9 </dd>
10</dl>
11<dl>
12 <dt>グレード</dt>
13 <dd>
14  <div>[mwform_select name="car_grade" children=":選択してください" post_raw="true"]</div>
15 </dd>
16</dl>
17
18<input type="submit" value="送信する">

行動規範の内容に同意します

回答2件

sesstionStorage.setItemを使用してデータを保存し、
sesstionStorage.getItemで呼び出しましたら解決いたしました。

javascript
1
2  //グレード選択項目
3  let car_list = {
4    アルファード30: [
5      '2.5X',
6      '2.5S',
7      '2.5S タイプブラック',
8      '2.5S Aパッケージ',
9      '2.5S Cパッケージ',
10      '3.5G Fパッケージ',
11      '3.5S Cパッケージ',
12      '3.5 エグゼクティブラウンジ',
13      '3.5 エグゼクティブラウンジS'
14    ],
15
16    アルファード20: [
17      '240X',
18      '240S',
19      '240G',
20      '240S Cパッケージ',
21      '240S G\'Z',
22      '240S タイプゴールド',
23      '350S',
24      '350S タイプゴールドⅡ',
25      '350S Cパッケージ',
26      '350GL Lパッケージ',
27      '350G プレミアムシートパッケージ',
28      '350S プレミアムシートパッケージ',
29    ],
30
31    ヴェルファイア30: [
32      '2.5X',
33      '2.5Z',
34      '2.5Z Aエディション ゴールデンアイズ',
35      '2.5Z Aエディション',
36      '2.5Z Gエディション',
37      '3.5V Lエディション',
38      '3.5ZA 3.5ZA Gエディション',
39      '3.5エグゼクティブラウンジ',
40      '3.5エグゼクティブラウンジS',
41    ]
42
43//セッションストレージに保存したデータを呼び出しselectedにする
44let car_res = sesstionStorage.getItem('car_name');
45$(`input[name="car_name"] option[value="${car_res}"]`).prop('selected', true);
46
47$('select[name="car_name"]').change(function () {
48    $('select[name="car_grade"] option:nth-of-type(n+2)').remove();
49    let res = $(this).val();
50
51    //セッションストレージに保存
52    sestionstorage.setItem('car_name', res);
53
54    if (res == 'アルファード（30系）') {
55      $.each(car_list['アルファード30'], function (index, value) {
56        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
57      });
58    } else if (res == 'アルファードハイブリッド（30系）') {
59      $.each(car_list['アルファードハイブリッド30'], function (index, value) {
60        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
61      });
62    } else if (res == 'アルファード（20系）') {
63      $.each(car_list['アルファード20'], function (index, value) {
64        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
65      });
66    } else if (res == 'アルファードハイブリッド（20系）') {
67      $.each(car_list['アルファードハイブリッド20'], function (index, value) {
68        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
69      });
70    } else if (res == 'ヴェルファイア（30系）') {
71      $.each(car_list['ヴェルファイア30'], function (index, value) {
72        $('select[name="car_grade"]').append('<option value="' + value + '">' + value + '</option>');
73      });
74  });
75
76});
77
78