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

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

ただいまの
回答率

90.52%

  • PHP

    20323questions

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

  • JavaScript

    16387questions

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

  • HTML

    8957questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • MySQL

    5847questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

2段プルダウンの値の保持について(JavaScript html)

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 913

jipang5054

score 2

前提・実現したいこと

WEBページにてエントリーフォームを作成しております。

base.html(エントリー画面)
base_ck.php(確認画面)
Aプルダウン(都道府県)
Bプルダウン(所属名)

MySQLよりPHPで先にBプルダウンの値を計算しておきます。
Aプルダウンを選択したのち、Aのvalue値をキーとしてBプルダウンの値を計算(javascript)しております。
例)Aプルダウン:北海道(value値:11)
Bプルダウン:北海道倶楽部(value値:1002)

ここまでは問題ないのですが、確認画面から戻る(submit)と、Aプルダウンは”北海道”と表示が残っていますが、Bプルダウンの値が消えて選択もできなくなります。又、Aプルダウンの値そのものはクリア(value値:0)されてしまっております。

今までは運用でごまかしておりましたが(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","1003");
//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>

試したこと

他のQ&Aサイトで教えていただいた以下の内容等を試しましたが、何の反応もありません。
BelongList() 関数を定義した後に
var num = document.form_kojin.branch_name.selectedIndex;
BelongList(document.form_kojin.branch_name.options[num].value);

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • jipang5054

    2017/12/13 20:33

    ご連絡ありがとうございます。上記サンプルコード上ではhtmlで書いておりますが、実際はMySQLのテーブルからPHPを利用してデータを取得しております。クリア(value値:0)される流れは、①エントリー画面より確認画面へ移動②確認画面よりbuttonで戻る③上記現象④その状態で再度確認画面へ移動⑤テスト的にPOST値を確認すると”0”となる。この辺りが問題点でしょうか。

    キャンセル

  • x_x

    2017/12/14 15:18

    "0"を確認しているのは、確認画面のさらに先ということですか? 確認画面は提示されていないため、これだけでは難しいかもしれません。

    キャンセル

  • jipang5054

    2017/12/15 12:21

    すみません。私の確認間違いでした。しっかりと、都道府県のvalue値はpostされておりました。ご指摘頂きありがとうございました。

    キャンセル

回答 2

+1

他の方の回答のコメントをみると、確認画面 → エントリーフォームへ戻る場合ははhistory.back()で戻っているのですね。。。既に他の方の回答コメントに書いてありますように、history.back()ではやりたいことを実装することはできません。(一部のブラウザでは実現できません)

質問文を編集するか追記しておいたほうが良いと思います。

確実に実現するには、確認画面 → エントリーフォームへ戻るときも、既にPOSTされている値をPOSTするようにすればよいです。確認画面から完了画面でPOSTしているのであれば、同じロジックを使いまわしできると思います。どうしてもPOSTしたくない場合は、セッションを使います。しかし、こちらのほうがセッションをクリアするタイミングを考慮しなければならないので面倒です。

 確認画面

<input name="back" type="button" onClick="history_back();" value=" 入力画面へ戻る ">

<script type="text/javascript">
function history_back()
{
    var form = document.createElement('form');
    form.action = '/base.html';
    form.method = 'post';
    document.body.appendChild(form);

    //セレクトボックスA
    var branch_name = document.createElement('input');
    branch_name.type  = 'hidden';
    branch_name.name  = 'branch_name';
    branch_name.value = <?php echo $branch_name; //セレクトボックスA ?>;
    form.appendChild(branch_name);

    //セレクトボックスB
    var belong = document.createElement('input');
    belong.type  = 'hidden';
    belong.name  = 'belong';
    belong.value = <?php echo $belong; //セレクトボックスB ?>;
    form.appendChild(belong);

    form.submit();
}
</script>

セレクトボックスB(belong)が生成されるタイミングは、セレクトボックスAの値を変更(onChange)したときのみなので、確認画面から戻ると消えてしまいます。

これを防ぐには、セレクトボックスAが既に選択状態(確認画面から戻ってきた場合)の時にもセレクトボックスBを生成するJavaScript関数BelongList()を実行しなければなりません。

 エントリー画面 - セレクトボックスA

確認画面からPOSTした値を取得して、セレクトボックスをPHPで選択状態にします。

<SELECT autofocus size="1" name="branch_name" id="branch_name" onChange="BelongList(this.options[selectedIndex].value);">
<?php

$sql = "select ID,branch_name from t_branch order by ID";
$rs = mysql_query($sql);

//↓↓追加↓↓
//セレクトボックスAのPOST値取得(確認画面から戻った場合)
$branch_post = (int)filter_input(INPUT_POST, 'branch_name', FILTER_SANITIZE_NUMBER_INT);

while($row=mysql_fetch_array($rs)){
    //↓↓追加↓↓
    $selected = $posted_branch === $row["ID"] ? ' selected="selected"' : '';
    print("<OPTION value=". $row["ID"] . $selected .">". $row["branch_name"] . "</OPTION>\n");
}

?>
</SELECT>

 エントリー画面 - JavaScript

セレクトボックスAが、表示時に選択状態にあるか確認してBelongList()を実行するJavaScriptコードを追加します。

//データベースよりJavaScriptにて「所属名」を配列に格納する
belong_value = new Array();
belong_text = new Array();
belong_length = new Array();

<?php
//ここでBプルダウンの値を計算して配列に格納する。
//データサンプル 
//belong_value[11] = new Array("0","1001","1002","1003");
//belong_length[11] = 3;
//belong_text[11] = new Array("---","北海道","北海道倶楽部","札幌クラブ");
?>

//↓↓追加↓↓

//セレクトボックスA値
var posted_branch_name = parseInt(document.form_kojin.branch_name.value);
if (selected > 0) {
    BelongList(posted_branch_name);
}

//セレクトボックスB値
var posted_belong = <?php echo ($val = filter_input(INPUT_POST, 'belong', FILTER_SANITIZE_NUMBER_INT)) ? $val : 0; ?>;

//↑↑ここまで↑↑

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 (posted_belong == belong_value[idx][i]) {
            document.form_kojin.belong.options[i].selected = true;
        }
    }
    //選択リストがブランクの場合
    if(i==0){
        document.form_kojin.belong.length=1;
        document.form_kojin.belong.options[i].text = "---";
        document.form_kojin.belong.options[i].value= 0;
    }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/21 18:03

    To: Tomakさん
    ご丁寧にご教授頂き誠にありがとうございます。
    またご説明不足で申し訳ございません。

    まずセレクトボックスA(都道府県)につきましては、MySQLのテーブルからPHPを利用して都道府県47データを取得し、表示しております。
    <?php
    $sql = "select ID,branch_name from t_branch order by ID";
    $rs = mysql_query($sql);
    while($row=mysql_fetch_array($rs)){
    print("<OPTION value=". $row["ID"] . ">". $row["branch_name"] . "</OPTION>\n");
    }
    ?>

    そしてご質問です。
    教えていただきました、以下の構文はセレクトボックスB(所属名)を生成するコードではないでしょうか。

    //ブランチセレクトボックスのPOST値取得(確認画面から戻った場合)
    $branch_post = (int)filter_input(INPUT_POST, 'branch_name', FILTER_SANITIZE_NUMBER_INT);

    $branch_option = '';

    foreach ($belong_text as $idx => $label) {
    $selected = $branch_post === $belong_value[$idx] ? ' selected' : '';
    $branch_option .= '<OPTION value="'.$belong_value[$idx].'"'.$selected.'>'.$label.'</OPTION>'."\n";
    }

    上記コードを追記すると、セレクトボックスBが生成できなくなりました。
    また$branch_optionをセレクトボックスA(都道府県)の表示項目にすると反応しませんでした。

    私の理解不足で御足労をお掛け致します。
    一度ご確認頂けましたら幸甚です。

    キャンセル

  • 2017/12/21 21:53 編集

    他の方の回答のコメントに、確認画面 → エントリーフォームへ戻る場合にPOSTではなく「history.back()」しているとあったので、回答を全般的に編集しました。また、セレクトボックスBの選択値の復元用のコードが抜けていたので、追加しておきました。
    実際にコードは動かしていないので不具合があるかもしれません。

    キャンセル

0

【ヘルプ|teratail(テラテイル)】
https://teratail.com/help#posted-otherservice

teratailでは、マルチポスト*の推奨はしていません。
やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。 


他のQ&Aサイトで教えていただいた以下の内容等を試しましたが、何の反応もありません。

DOMの読み込み前に実行しているからです。scriptタグを</body>直前に移動してみてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/12 15:36

    ご連絡頂きありがとうございます。
    大変申し訳ないのですが、教えていただきました内容がよく理解できませんでした。
    <script>から</script>までのコードを、<body>タグの直前に移動しましたが改善されません。
    そもそも私の理解不足かと思います。
    DOMとは?から調べてみているところです。
    引き続き自力で解決できるように努力致しますが、お時間がございましたら、どのコードをどの位置へ移動すればいいのか、もう少し詳しく教えていただけないでしょうか。
    レベルが低すぎで申し訳ございません。
    何卒宜しくお願い申し上げます。

    キャンセル

  • 2017/12/12 16:20

    まったく読んでませんが、</body>の直前ですかね?
    <body>の直前ということはありえないので

    キャンセル

  • 2017/12/12 19:22

    To: x_xさん
    補足ありがとうございます。「</body>」と書いたつもりでした・・・。修正しておきます。

    To: jipang5054さん
    上記の通りです。

    キャンセル

  • 2017/12/13 14:07

    To: x_xさん
    To: keiさん
    お忙しい中ご指摘頂き大変ありがとうございます。
    <head>内の<script>から</script>までの全てのコードを、</body>タグの直前に移動しましたが改善されません。(修正方法としてはこの理解で宜しいでしょうか。)

    ちなみに、確認画面から戻る方法はsubmitではなくbuttonでした。
    以下、コードです。
    <input name="back" type="button" onClick="history.back();" value=" 入力画面へ戻る ">

    間違いがあればご指摘いただければと思います。
    何卒宜しくお願い申し上げます。

    キャンセル

  • 2017/12/15 03:00

    num の値が取れているか確認してみてください。あと、history.back()で戻る場合の挙動はブラウザによって違ったと思います。(前の値がきちんと残ったり残らなかったり不安定だった気がします)

    キャンセル

  • 2017/12/18 18:46

    ご連絡が遅くなりすみませんでした。「試したこと」で書いてあるコードをすっかり忘れておりました。
    BelongList() 関数を定義した後に、該当の2行を挿入しました。
    Aプルダウン・Bプルダウンと選択し、確認画面へ移動し、戻るボタンでエントリー画面へ戻ると、ブラウザによって以下の結果となりました。
    <safari/firefox>
    A・Bが選択された状態になりました。(まさしく解決された状態)
    <Chrome>
    Aは選択された状態で、Bは、Aをキーとした選択肢(例:"北海道","北海道倶楽部","札幌クラブ")が表示され選べるようになりました。(ここまででも大変な進歩です)
    <IE>
    変化なし(Bプルダウンに何も表示されない)

    ご指摘のとおり、history.back()で戻る挙動の差なのでしょうか。
    ちなみに以下3つの方法で確認画面から「戻る」動きを試しました。

    <input name="back" type="button" onClick="history.back();" value=" 入力画面へ戻る ">
    <a href="#" onClick="history.back(); return false;">入力画面へ戻る</a>
    <button type="button" onClick="history.back()">入力画面へ戻る</button>

    この不安定な状況を安定させる方法がございましたら教えてください。
    何卒宜しくお願い申し上げます。

    キャンセル

  • 2017/12/20 10:49

    デベロッパーツールでnum の値が取れているか確認してみてください。
    http://ryus.co.jp/blog/customize-php-search-1/
    http://eng-entrance.com/javascript-display-error

    history.back()のときだけスクリプトが動かない状態であれば、history.back()ではなくPOSTしてPHP側で値を設定してしまうくらいしか思いつきません。

    キャンセル

  • 2017/12/21 18:10

    ご連絡ありがとうございます。
    デベロッパーツールでのnum値の確認方法がよくわからなかったのでalertで確認したところ、確認画面から帰ってきたとき、IEのみ「0」でした。他のブラウザは値がしっかりと入っています。
    おっしゃるとおり、history.back()の挙動とブラウザの関係が原因でしょうか。

    >history.back()ではなくPOSTしてPHP側で値を設定してしまうくらいしか思いつきません。

    お時間がございましたらこの方法も教えていただくことはできますでしょうか。
    何度も申し訳ございません。

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20323questions

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

  • JavaScript

    16387questions

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

  • HTML

    8957questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • MySQL

    5847questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。