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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

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

コンボボックス

GUIの要素のひとつです。Listboxと同様にいくつかのうちひとつを選択する機能だが、Comboboxの場合は選択されたもののみがデフォルトとして表示される。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2570閲覧

javascriptのコンボボックスで選択された項目を維持したい

alolo

総合スコア8

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

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

コンボボックス

GUIの要素のひとつです。Listboxと同様にいくつかのうちひとつを選択する機能だが、Comboboxの場合は選択されたもののみがデフォルトとして表示される。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/09 09:25

編集2017/08/09 09:35

###商品のオーダーフォームを作成したい
javascrptとPHPで商品のオーダーフォームを作成しています。
入力必須項目が空欄だった場合、入力内容の確認画面で『未入力の必須項目があるので入力しなおしてください』というメッセージとともにブラウザバックボタンを表示し、入力画面に戻るようにしています。

その際、入力画面に戻ると選択されていたコンボボックスの内容がリセットされてしまい、1から選択しなおさなくてはならなくなるので、その選択状態を維持したいです。

###該当のソースコード

javascript

1 2<script type="text/javascript"> 3 // カテゴリーA・B・Cに項目を追加する 4 function rep_list() { 5 var a_list = document.forms["orderform"].カテゴリーA; 6 var b_list = document.forms["orderform"].カテゴリーB; 7 var b_list = document.forms["orderform"].カテゴリーB; 8 9 var map_a_list =[ 10 {text: "選択してください", value:""}, 11 {text: "リストA_1", value:"A_1"}, 12 {text: "リストA_2", value:"A_2"}, 13 {text: "リストA_3", value:"A_3"} 14 ]; 15 var map_b_list =[ 16 {text: "選択してください", value:""}, 17 {text: "リストB_1", value:"B_1"}, 18 {text: "リストB_2", value:"B_2"}, 19 {text: "リストB_3", value:"B_3"} 20 ]; 21 var map_c_list =[ 22 {text: "選択してください", value:""}, 23 {text: "リストc_1", value:"c_1"}, 24 {text: "リストc_2", value:"c_2"}, 25 {text: "リストc_3", value:"c_3"} 26 ]; 27 28 for (var array_cnt = 0; array_cnt < map_a_list.length ; array_cnt++) { 29 a_list.options[array_cnt] = new Option( map_a_list[array_cnt]['text'], map_a_list[array_cnt]['value']); 30 } 31 32 for (var array_cnt = 0; array_cnt < map_b_list.length ; array_cnt++) { 33 b_list.options[array_cnt] = new Option( map_b_list[array_cnt]['text'], map_b_list[array_cnt]['value']); 34 } 35 36 for (var array_cnt = 0; array_cnt < map_c_list.length ; array_cnt++) { 37 c_list.options[array_cnt] = new Option( map_c_list[array_cnt]['text'], map_c_list[array_cnt]['value']); 38 } 39 } 40 41 // 選択されている項目のvalueを取得 42 function sub_check() { 43 var item_a = $("textarea[name=カテゴリーA]").val(); // カテゴリーAで選択された項目のvalueを取得 44 var item_b = $("textarea[name=カテゴリーB]").val(); // カテゴリーBで選択された項目のvalueを取得 45 var item_c = $("textarea[name=カテゴリーC]").val(); // カテゴリーCで選択された項目のvalueを取得 46 } 47</script> 48 49

HTML

1<html> 2 <body> 3 <form id = "orderform" action = "mail.php" method = "post"> 4 <table> 5 <tbody> 6 <tr> 7 <th>商品カテゴリーA</th> 8 <td> 9 <select name = "カテゴリーA" id = "cate_a"> 10 11 <select> 12 </td> 13 <tr> 14 15 <tr> 16 <th>商品カテゴリーB</th> 17 <td> 18 <select name = "カテゴリーB" id = "cate_b"> 19 20 <select> 21 </td> 22 <tr> 23 24 25 <tr> 26 <th>商品カテゴリーC</th> 27 <td> 28 <select name = "カテゴリーC" id = "cate_c"> 29 30 <select> 31 </td> 32 <tr> 33 </tbody> 34 </table> 35 36 <!-- 確定・送信 --> 37 <button id="submit" class="show" onClick="subcheck()"> 38 入力情報を確定して送信する 39 </button> 40 </form> 41 42 <script> 43 rep_list(); 44 </script> 45 </body> 46</html> 47

###補足情報
使用ツール:Adobe Brackets

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

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

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

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

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

x_x

2017/08/09 09:31

PHPタグがありませんが、これはむしろサーバー側処理と考えます。いかがでしょうか?
guest

回答1

0

ベストアンサー

submitイベントで値をcookie等に保存しておき、pageshowイベントでevent.persistedをチェックして状態を復元するするのがいいのではないでしょうか。

参考:bfcache について覚えて帰ってもらいます。(転載) - oogatta のブログ

投稿2017/08/09 10:05

Lhankor_Mhy

総合スコア36074

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

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

alolo

2017/08/11 03:36

ご回答ありがとうございます! ブラウザはgoogle chrome バージョン: 60.0.3112.90(Official Build)(64 ビット)なのですが、valueをcookieに保存するにはどうすればよいのでしょうか
alolo

2017/08/12 09:05

ありがとうございます。参考にさせていただきます。また機会があればよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問