- 締切済み
２段プルダウンの値の保持について（html）
２段プルダウンの値の保持について（html） お世話になっております。 WEBページにてエントリーフォームを作成しております。 base.html（エントリー画面） base_ck.php（確認画面） Aプルダウン（都道府県） Bプルダウン（所属名） MySQLよりPHPで先にBプルダウンの値を計算しておきます。 Aプルダウンを選択したのち、Aのvalue値をキーとしてBプルダウンの値を計算（javascript）しております。 ここまでは問題ないのですが、確認画面から戻る（submit）と、Bプルダウンの値が消えて選択もできなくなります。 今までは運用でごまかしておりましたが（Aプルダウンで一旦違う値を選択し再度選びなおすとBプルダウンが復活する）、 クライアントより修正依頼がきてしまいました。 PHP・HTMLは何とか書けるのですが、JavaScriptはど素人で、このプログラムもネットから情報を拾い集めて何とかできました。 ご教授いただければ幸いです。 サンプルコードは以下となります。 「base.html（エントリー画面）」 <html lang="ja"> <head> <title>テストページ</title> <script type="text/javascript"> <!-- データベースよりJavaScriptにて「所属名」を配列に格納する belong_value = new Array(); belong_text = new Array(); belong_length = new Array(); <?php //ここでBプルダウンの値を計算して配列に格納する。 //データサンプル //belong_value[11] = new Array("0","1001","1002"); //belong_length[11] = 3; //belong_text[11] = new Array("---","北海道","北海道倶楽部","札幌クラブ"); ?> function BelongList(idx){ //選択リストに項目を追加 for(i=0;i<belong_length[idx];i++){ document.form_kojin.belong.length=belong_length[idx]; document.form_kojin.belong.options[i].text = belong_text[idx][i]; document.form_kojin.belong.options[i].value= belong_value[idx][i]; } //選択リストがブランクの場合 if(i==0){ document.form_kojin.belong.length=1; document.form_kojin.belong.options[i].text = "---"; document.form_kojin.belong.options[i].value= 0; } } //--> </script> </head> <body> <div id="wrapper"> <div id="main"> <h1>申込ページ</h1><br /> <?php $action_ck = "https://aaa/base_ck.php"; ?> <h2></h2> <div class="main-frame"> <p><span class="style-indispensable">※必須項目</span></p><br /> <form name="form_kojin" action="<?php echo htmlspecialchars($action_ck, ENT_QUOTES); ?>" method="post"> <table> <tr> <th class="th-style"> <div><span class="style-indispensable">※</span>都道府県</div> </th> <td class="td-style"> <SELECT autofocus size="1" name="branch_name" id="branch_name" onChange="BelongList(this.options[selectedIndex].value);"> <OPTION value="0">---</OPTION> <OPTION value="11">北海道</OPTION> <OPTION value="21">青森県</OPTION> <OPTION value="22">岩手県</OPTION> </SELECT> </td> </tr> <tr> <th class="th-style"> <div><span class="style-indispensable">※</span>所属名</div> </th> <td class="td-style"> <SELECT size="1" name="belong" id="belong"><!-- BelongList関数より自動生成 --> <OPTION value="0">---</OPTION> </SELECT> </td> </tr> </table> <br /><br /> <div> <input name="submit" type="submit" value=" 入力確認画面へ " class="button-05"> </div> </form> </div> </div> </div> </body> </html>
- jipang5054
- お礼率61% (51/83)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- t_ohta
- ベストアンサー率38% (5292/13826)
ページが表示された時に BelongList() を実行していないから表示されないだけです。 BelongList() 関数を定義した後に var num = document.form_kojin.branch_name.selectedIndex; BelongList(document.form_kojin.branch_name.options[num].value); って感じで関数を呼んでやればいいんじゃないでしょうか。
お礼
ご連絡遅くなりました。 教えていただきました内容を基に書いてみたところやはり反応しないので、アラートで見てみたら、確認画面から戻ると var num = document.form_kojin.branch_name.selectedIndex; の値が0でした。 ここが原因だと思われますが対処の仕方がわかりません。 引き続きご教授願えないでしょうか。
補足
早速のご連絡ありがとうございます。 教えていただいた２行を早速挿入してみましたが解消されません。別の業務のため席を離れますので明日以降の取り掛かりになります。何かお気づきの点がありましたらご連絡いただければ幸いです。 またご連絡いたします。