質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1511閲覧

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

rinrin1137

総合スコア87

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/09/02 01:01

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="送信する">

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2021/09/07 02:09

rinrin1137

総合スコア87

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

自己解決いたしました。

投稿2021/09/02 06:45

rinrin1137

総合スコア87

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2021/09/02 09:09

【質問をした後に自己解決してしまった --- ヘルプ|teratail(テラテイル)】 https://teratail.com/help#resolve-myself > 後から読む人のためにも、具体的な解決手順を記載してください。
rinrin1137

2021/09/07 02:01

kei344様 ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問