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

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

ただいまの
回答率

88.23%

HTMLのselect要素の値を保持したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 4,483

HajimeHamada

score 20

まず、簡単なソースを2つ載せます。

<?php
$a_array = array("1", "2", "3");
$a_word = isset($_POST['a_select']) ? $_POST['a_select'] : '';
?>
<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset='utf-8'>
<title>Select Test</title>
</head>
<body>
  <form name="main" action="" method="post">
    <label>A:</label>
    <select name="a_select">
      <?php
      for($i = 0; $i < count($a_array); $i ++){
        echo "<option value=";
        echo "\"$a_array[$i]\"";
        if($a_array[$i] === $a_word){
          echo " selected";
        }
        echo ">$a_array[$i]";
      }
      ?>
    </select>
    <label>B:</label>
    <select name="b_select">
    </select>
    <input type="submit" value="search">
  </form>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.j\
s"></script>
  <script>
   $(function(){
     $('[name=a_select]').change(function() {
       // 選択されているvalue属性値を取り出す
       var obj ={};
       obj['a'] = $('[name=a_select]').val();

       $.get('b.php', obj, function(data) {
         console.log(data);
         var result = data.split(',');

         // b_selectの選択肢を空にする
         $('[name=b_select]').empty();

         // b_selectの選択肢に加える
         $option = $('<option>')
           .val(data)
           .text(data);
         $('[name=b_select]').append($option);
       });
     });
   });
  </script>
</body>
</html>


上のソースの「b.php」です。

<?php
$a = $_GET['a'];

$b = $a . $a . $a;
echo $b;
?>

最初のPHPを動かすと、AとB2つのセレクタが現れます。Aの方を選択すると、JavaScriptによってb.phpを呼びに行き、Bの方のセレクタの値が設定されます。(b.phpは簡単化していますが、実際のコードではサーバ側でデータベースにアクセスするという処理をしています。)

ここでsubmitをすると、Aの方はselectされた値がそのまま残るのですが、当然Bの方は値がなくなってしまいます。これをAと同じように元の値を残すことはできないでしょうか?A, Bの値を使って、データベースを検索するプログラムを作っており、検索後に値がなくなってしまうと、使い勝手が非常に悪いと考えています。

処理の順番の問題で、JaveScriptで作り出した値をPHPに渡すことはできないようなのでこのままの構成では難しいのかもしれませんが、実現できる構成があれば教えていただきたいです。

よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+2

$('[name=a_select]').change(function() {
・・・・
}).trigger('change');


のようにすれば、ロード時にchangeイベントが発火して
b.phpを取りに行きます

※一部typo修正

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/03/06 10:14

    なるほど。triggerを使うのですね。確かに所望の動作になることが確認できました。ありがとうございました。

    キャンセル

+1

b の選択肢を保持する、のは必ずしも正解ではないですね。正確には「a の選択状態によって b の選択肢を設定する」べきですから。

ということは、「画面が表示された段階で、a が選択されていたら、b の選択肢を更新」すればよいのです。
つまり jQuery を使うなら

$.when($.ready).then(function() {
  if ($("input[name=a_select]').val() != '') {
    // ここの処理は$('[name=a_select]').change() の中と同じ
  }
});


のようにしてやればよいのです。
その上で PHP の方で、b の選択状態も受けておいて、上の JavaScript の最後で選択状態も再現するとなおよいでしょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/03/06 10:13

    ありがとうございます。確かにBをそのまま残すのではなく、Aを見ての設定にしないとおかしいですね。画面が表示された場合の書き方など、大変参考になります。

    キャンセル

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

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

関連した質問

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