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

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

ただいまの
回答率

89.23%

javascriptで動的に変えたセレクトボックスをPOST送信時、選択された状態で受け取りたい。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 372

chapp

score 207

お世話になります。
少々長いタイトルになってしまいましたが、PHPにてウェブアプリを作っているのですが、データ(MySQL)にカテゴリ登録された大カテゴリ、小カテゴリがあり、それを選択して登録する場面があります。

https://oni-on-design.com/2013/11/233

カテゴリの選択はセレクトボックスを選択して登録する流れを考えており、このセレクトボックスを動的に動かしたいと考え、上記サイトを参考にし、大カテゴリ、小カテゴリを呼び出す際にjavascript部を以下のような形で成形しています。

javascript部形成

$query = "SELECT b_cate_no, b_cate_name FROM ap_category_b ORDER BY b_cate_no";
$result = $mysqli->query($query);
$row_cnt = $result->num_rows;
if($row_cnt != 0){
    $i=0;

    $select_data = "<option value = \"\">選択してください</option>";

    while($row = $result->fetch_assoc()){

        $select_data_b[] = $row["b_cate_name"];

        if($row["b_cate_name"] == $b_cate_name){
            $selected = "selected";
        }else{
            $selected = "";
        }

        $select_data .= "<option value = \"".$row["b_cate_name"]."\" ".$selected.">".$row["b_cate_name"]."</option>";

        if($i==0){

            $js = "if(select1.options[select1.selectedIndex].value == \"".$row["b_cate_name"]."\"){\n";

        }
        else{

            $js .= "else if(select1.options[select1.selectedIndex].value == \"".$row["b_cate_name"]."\"){\n";

        }


        $b_cate_no = $row["b_cate_no"];


        $query2 = "SELECT m_cate_no, m_cate_b_no, m_cate_name, m_cate_sort FROM ap_category_m WHERE m_cate_b_no = '$b_cate_no' ORDER BY m_cate_no";
        $result2 = $mysqli->query($query2);
        $row_cnt2 = $result2->num_rows;

        if($row_cnt2 != 0){

            $js .= "select2.options[0] = new Option(\"選択してください\");\n";

            $h = 1;

            while($row2 = $result2->fetch_assoc()){

                $js .= "select2.options[".$h."] = new Option(\"".$row2["m_cate_name"]."\");\n";

                $h++;
            }
        }

        $js .= "}\n";
        $i++;
    }
}

javascript

<script type = "text/javascript">
<!--
function functionName()
    {
        var select1 = document.forms.formName.category_b; //変数select1を宣言
        var select2 = document.forms.formName.category_m; //変数select2を宣言

        select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要

<?php echo $js; ?>

    }

//-->
</script>

HTML部

<!--選択肢その1-->
<select name = "category_b" onChange="functionName()" style="height:35px;">
<?php echo $select_data; ?>
</select>
<!--選択肢その2(選択肢その1の項目によって変化)-->
<select name = "category_m">
</select>

とここで質問です。
2つある選択肢ですが、POSTで送信(自身に送信して受け取っている)したとき、それぞれのセレクトボックスは選択された状態にしたいと考えており、選択肢その1は問題ないものの、、選択肢その2(category_m)は選択された状態にならないばかりか、選択肢その1を再度選択する必要がある状態で、また、これらを登録し、データを呼び出した際の修正画面を想定したときも、選択肢その1、選択肢その2、それぞれが登録された値に選択された状態としたいと考えていますが、受け取った値(変数にある値)をどのように組み込めば、選択された状態となるのでしょうか?

お忙しい中恐縮ですが、アドバイスのほど頂戴できれば幸いです。
よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+4

「javascript部形成」部で、
選択された値に応じてoptionタグにselectedを持たせるようにすればいいんじゃないかと思ったけど、
あるいはページ読み終わり後に実行するjavascriptブロックを想定して、
そこから該当箇所を選択状態にするDOM操作をするとか。

掲載していおるソースだと、
親要素はphpで生成、子要素孫要素はjsで生成ってやってるけど、
どっちかに統一した方が扱いやすそう。
jsで動的にレンダリングせずとも、
phpで全部生成しておいてjsで非表示のコントロールだけしちゃうのも手ではある。
(htmlが重くなるけども。)

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/01/31 10:24

    関係するselectには必ずidを降っておきます。その方がDOM操作しやすいので。
    3階層の考え方が難しければテストで2段階のを考えましょう。
    親selectの1番めに連動する子select、2番めに連動する子select、ってphpコード上で機械的に生成するようにして、
    選択状態に関係ない子selectはdisplay:noneしておくというのが一つ。
    各selectのonchangeイベントで表示非表示を調整するjsでの処理を定義しておいて、
    getElementByIdとか使えば非表示のコントロール対象を探し当てられます。
    [JavaScriptでgetElementByIdを使う方法!HTML要素を取得する \| TechAcademyマガジン](https://techacademy.jp/magazine/15289)
    getElemntByIdなら、引数の文字列を機械生成時のルールで子selectを指定できます。

    キャンセル

  • 2019/01/31 10:36

    m6uさん

    お忙しい中、早速のお返事ありがとうございます。
    このご説明だけで「理解できました!」とはなりませんが、このご説明を元に調べてみます。

    改めて必ずやご報告い致します。
    取り急ぎ、ありがとうございました。

    キャンセル

  • 2019/02/02 14:06

    m6uさん

    お世話になっております。ただいま勉強中ですが、時間を要してしまいそうなので、ひとまずここは解決済みとさせていただきます。

    要点をいただけるのは大変助かります。
    ありがとうございました。

    キャンセル

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

  • ただいまの回答率 89.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • javascriptで動的に変えたセレクトボックスをPOST送信時、選択された状態で受け取りたい。