Ajaxで連動したselectでデフォルト設定してAjax処理したい - PHPプロ!Q&A掲示板

4965

  • 募集中!! 0P

Ajaxで連動したselectでデフォルト設定してAjax処理したい

質問日時 / 2018年8月3日 10:51    回答数 / 1件

Questioner:  kiyoro  このエントリーをはてなブックマークに追加 

キーワード / 111    222    333   

セレクトボックス(年月)が変更したらAjaxにて該当の年月のデータが表示するようにしてますが 最初のデフォルトを先頭の年月に指定して該当のデータを表示したいのですが
どのようにしたらできるのでしょうか?
以下 ソースを掲載してます よろしくお願いします

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>

      <h1 align="left">タイトル</h1>

      <h2 align="left"><?php echo $misemei?></h2>
      <h5 align="center"> 単位:千円</h5>
      <div class="">
        <span>年月:</span>
        <select id="ym" name="ym">
          <option>選択して下さい</option>
          <?php foreach($ym_list as $key => $ym_name){
               echo '<option value="'.$key.'">'.$ym_name.'</option>';
            }?>
          </select>
      </div>
  <h5 align="center"> </h5>
  <div id="XMLHttpRequest"></div><!-- ステータスコード -->
  <div id="textStatus"></div><!-- エラー情報 -->
  <div id="errorThrown"></div><!-- 例外情報 -->

  <div id="result"></div><!-- 返してきたデータを表示 -->
<script>
document.getElementById('ym').options[0].selected = true;
</script>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<script>
$(document).ready(function() {

  document.getElementById('ym').options[0].selected = true;


    $('#ym').change(function() {
     //var data = {パラメータ : 値};
     var data = {request : $('#ym option:selected').text()};
        //var data = {request : $('#ym').val()};

    //alert($('#ym option:selected').text());
    //alert($('#ym').val());
    //Ajax通信メソッド
    //type : HTTP通信の種類(POSTとかGETとか)
    //url  : リクエスト送信先のURL
    //data : サーバに送信する値
    $.ajax({

      url: "t_sonekib.php",
      type: "POST",
      dataType: "json",
      data: data,

      //Ajax通信が成功した場合に呼び出されるメソッド
      success: function(data, dataType){
        //デバッグ用 アラートとコンソール
     if(data == null) alert('データが0件でした');
       $('#my_table').empty();//クリア

      // 返ってきたデータの表示
       for (var i =0; i<data.length; i++) {

       var str = addToTable(data[i]);
          $('#my_table').append(str);

      }
      $("#my_table").append("</table>\n");
        },
      //Ajax通信が失敗した場合に呼び出されるメソッド
      error: function(XMLHttpRequest, textStatus, errorThrown){
        alert('Error : ' + errorThrown);
        $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
        $("#textStatus").html("textStatus : " + textStatus);
        $("#errorThrown").html("errorThrown : " + errorThrown);
      }
    });
    return false;
  });
});

function addToTable(data){

    var str = '<tr>\n<td>' +data.項目 + '</td>'
                + '<td align="right">' +Number(data.数値).toLocaleString() + '</td>\n<tr>'
    return str;
}

</script>


<table border='1' id="my_table" class="tablesorter">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>


ツリー一覧

┗A01shimix(JavaScript側で)$(document).ready で $('#ym').ch

回答一覧

並び替え:

A01
answerershimix [8月3日 14:10] (最終編集:8月3日 14:10)

(JavaScript側で)$(document).ready で $('#ym').change と同様の処理を行えばいいのでは?

htmlソース生成時に(phpで)無理矢理やってもいいですが、何かあったときに変更する部分・調査する部分はまとまっていた方が楽だと思います。

この意見に回答する

ツリーへ TOPへ

<<質問一覧へ



Pick Up Q&A

Q
ログファイルの中の空のデータ行を削除したい
 このエントリーをはてなブックマークに追加 
A
ログのデータ個数(列数)が固定で、空のログが"<><><>"だと既知であれば if ($line === "<><><>") { continue; } で読み飛ばしてもいいのでは? ...

>>続きを読む

まずは配列や文字列の扱いから、じっくり勉強して行きましょう。

▲解説者:岡本(アシアル株式会社 教育コーディネーター兼 システムエンジニア)