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

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

ただいまの
回答率

90.13%

セレクトボックスの選択内容を、確認画面に表示させたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,276

hiro0208

score 53

フォーム画面の入力内容確認画面を作っています。

セレクトボックスの選択内容を、確認画面に表示させたいです。

今は、フォームの入力内容を以下のようにjQeuryで取得し、表示させています。

function confirm(){
var c_receive = $('#receive option:selected').text();
        $('#set_c_receive').text(c_receive);
}


これを
PHPで取得したデータベースのデータを、javascriptの配列データに変え、その配列データから取得し、
確認画面に表示させるための、JQueryを使用した関数の作り方がわからないで困っています。

データベースには、

no receive
1 Aさん
2 Bさん
3 Cさん

と入れています。

今回そのデーターベースのデータを、PDOで取得し
$ArrayStaff
というPHPでの配列データにしました。
$jsonArrayStaff = json_encode($arrayStaff);

<script type="text/javascript">
var arrayStaff = JSON.parse('<?php echo $jsonArrayStaff; ?>');
</script>

という、やり方でjavascriptの配列に変換しました。
そこで、console.log(arrayStaff)で
コンソールログで確認すると、

【Object】
1:"Aさん"
2:"Bさん"
3:"Cさん"

として確認できました。

このセレクトボックスの選択した項目を、arrayStaffに格納されているデータを利用して
確認画面で表示させたいです。

①セレクトボックスで項目を選択し、
②確認ボタン[confirm()]を押す、
③ダイアルログ(確認画面)の表示。

arrayStaffは配列データなので、jQeuryの$.eachをうまく使用し、ダイアルログに表示させたい思っています。
そこの関数:confirm()作りでご教授いただけないでしょうか?
どうぞ、よろしくお願いいたします。

function confirm(){
            $.each(arrayStaff, function(key, value) {
}
foreach ((array)$arrayStaff as $key => $data) {
    $optionStaff .= '<option value="' . $key . '">' . $data . '</option>';
}

$jsonArrayStaff = json_encode($arrayStaff);


<script type="text/javascript">
var arrayStaff = JSON.parse('<?php echo $jsonArrayStaff; ?>');
</script>

        <select id="receive" name="receive">
        <?php echo $optionStaff; ?>
        </select>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2017/06/24 20:03

    「チェックボックス」がありません。コードか質問文を確認してみてください。

    キャンセル

  • kei344

    2017/06/24 23:42

    チェックボックスとセレクトボックスをどう関連させるつもりか具体的にお書きください。

    キャンセル

  • hiro0208

    2017/06/25 14:30

    失礼しました。セレクトボックスのテキストを取得です。

    キャンセル

  • kei344

    2017/06/25 16:22

    「何をしたときに」「どの値を得たいのか」を具体的なデータ構造も含め提示されたほうが良いと思います。

    キャンセル

回答 2

checkベストアンサー

+2

サンプルコード

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="">
            <p>
                <select name="staff">
                    <option value="1">A</option>
                    <option value="2">B</option>
                    <option value="3">C</option>
                </select>
            </p>
            <button type="button" id="button">OK</button>
        </form>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#button").on('click', function () {
                    var v = $("select[name=staff]").val();
                    var t = $("select[name=staff] option[value=" + v + "]").text();
                    alert(t);
                });
            });
        </script>
    </body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

セレクトボックスの選択をされていないデータをJSONで他に渡すのでしょうか?
セレクトボックスの本来の目的からはずれるので、むしろセッションなどで
引き継ぐ方がいいのでは?

 追記

もし$arrayStaffがDBから取り出したリストであれば形式としてはこうなるのでは?
$arrayStaff=[
["no"=>1,"receive"=>"Aさん"],
["no"=>2,"receive"=>"Bさん"],
["no"=>3,"receive"=>"Cさん"],
];

従って、noやreceiveをつかってデータを抽出しないとセレクトボックスにはいりませんよね?

$arrayStaff=[
  ["no"=>1,"receive"=>"Aさん"],
  ["no"=>2,"receive"=>"Bさん"],
  ["no"=>3,"receive"=>"Cさん"],
];
$optionStaff='<select name="arrayStaff">'.PHP_EOL;
foreach ((array)$arrayStaff as $row) {
  $optionStaff .= '<option value="' . htmlspecialchars($row["no"]) . '">';
  $optionStaff .= htmlspecialchars($row["receive"]) . '</option>'.PHP_EOL;
}
$optionStaff.="</select>".PHP_EOL;;
print $optionStaff;

$jsonArrayStaff = json_encode($arrayStaff);
print $jsonArrayStaff;

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/06/26 15:40

    参照方法がおかしそうなので追記しておきました

    キャンセル

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

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