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

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

ただいまの
回答率

87.92%

連動したセレクトボックス(リアルタイムに変更)

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,945

score 16

 前提・実現したいこと

DBからプルダウンの選択肢を読み込んでいます。
プルダウンで選択することで、次の選択肢が表示されるように作成したのですが
市町村選択からの次の選択肢を選ぶ形で作成しておりましたが、
市町村の上に都道府県を追加し、
都道府県を選択→絞り込まれた市町村を選択→店舗 と3段階で選択肢を表示できるようにしたいのですが
どなたかご教授いただけますよう、よろしくお願いいたします。
script部分を追加し、変数名を変えただけでは、動きませんでした。

 該当のソースコード

sentaku.php
----追加したい部分-----

<label>都道府県選択</label>
<select class="form-control change_area" name="change_area" id="change_area">
<?php foreach($area_list as $area){ ?>
<option value="<?php echo $area["area_id"];?>"><?php echo $area["area_name"];?></option>
<?php }?>
 </select>


----追加したい部分-----

----現状部分----

<label>市町村選択</label>
<select class="form-control change_city" name="change_city">
<?php foreach($city_list as $city){ ?>
        <option value="<?php echo $city["city_id"];?>"><?php echo $city["city_name"];?></option>
<?php } ?>
 </select>
 <label>店舗選択</label>
<select class="form-control change_shop" name="mail_class">
<option value="">店舗を指定しない</option>
</select>

/*都道府県用に追記した部分*/
<script>
  $(function () {
  $.ajax({
        url: "area.php",
        type: "POST",
        dataType: 'json',
        data: {
          city_id: $(".change_area").val(),
          mode: "mail"
        }
      })
      .done(function(data){
        $('.change_city option').remove();
        $.each(data, function(id, name){
          $('.change_city ').append($('<option>').text(name).attr('value', id));
        });
      });


    $('.change_city').on('change', function(){
    $.ajax({
            url: "area.php",
            type: "POST",
            dataType: 'json',
            data: {
              school_id: $(".change_area").val(),
              mode: "mail"
            }
          })
          .done(function(data){
            $('.change_city option').remove();
            $.each(data, function(id, name){
              $('.change_city ').append($('<option>').text(name).attr('value', id));
            });
          });
  });
  });
</script>
/*都道府県用に追記した部分*/
<script>
  $(function () {

  $.ajax({
        url: "shop.php",
        type: "POST",
        dataType: 'json',
        data: {
          city_id: $(".change_city").val(),
          mode: "mail"
        }
      })
      .done(function(data, textStatus, jqXHR){
        $('.change_shop option').remove();
        $.each(data, function(id, name){
          $('.change_shop').append($('<option>').text(name).attr('value', id));
  }).fail(function(jqXHR, textStatus, errorThrown){
    // エラーの場合処理
    $("div.result").text("エラーが発生しました。ステータス:" + jqXHR.status);
  });
});


    $('.change_city').on('change', function(){
    $.ajax({
            url: "shop.php",
            type: "POST",
            dataType: 'json',
            data: {
              school_id: $(".change_city").val(),
              mode: "mail"
            }
          })
          .done(function(data, textStatus, jqXHR){
            $('.change_shop option').remove();
            $.each(data, function(id, name){
              $('.change_shop ').append($('<option>').text(name).attr('value', id));
            }).fail(function(jqXHR, textStatus, errorThrown){
    // エラーの場合処理
    $("div.result").text("エラーが発生しました。ステータス:" + jqXHR.status);
  });
});
</script>

 市町村用の元々あった shop.php

    //Ajaxで渡ってきた値をもとに modelテーブル から該当する model を抽出
    $school_id = $_POST['shop_id'];
    $mode = "none";
    if( isset($_POST['mode']) )
        $mode = $_POST['mode'];

    $db = new db_master();
    $class_list = $db->select("table名", array(), "city_id=\"" . $city_id . "\" ORDER BY shop_name ASC", "multi");

    //抽出された値を $model_list配列 に格納
    $model_list = array();
    if($mode == "none")
        $model_list[0] = "選択してください";
    else if($mode == "mail")
        $model_list[0] = "店舗を指定しない";

    foreach($class_list as $key => $value)
    {
        $model_list[$value["class_id"]] = $value["class_name"];
    }

    header('Content-Type: application/json');
    //json形式で index.php へバックする
    echo json_encode($model_list);

 都道府県用に追加した area.php

    //Ajaxで渡ってきた値をもとに modelテーブル から該当する model を抽出
    $school_id = $_POST['area_id'];
    $mode = "none";
    if( isset($_POST['mode']) )
        $mode = $_POST['mode'];

    $db = new db_master();
    $class_list = $db->select("table名", array(), "area_id=\"" . $area_id. "\" ORDER BY area_name ASC", "multi");

    //抽出された値を $model_list配列 に格納
    $model_list = array();
    if($mode == "none")
        $model_list[0] = "選択してください";
    else if($mode == "mail")
        $model_list[0] = "店舗を指定しない";

    foreach($class_list as $key => $value)
    {
        $model_list[$value["class_id"]] = $value["class_name"];
    }

    header('Content-Type: application/json');
    //json形式で index.php へバックする
    echo json_encode($model_list);

=現象=
追記したものを入れ込んでみましたが、単純に<script></script>部分をコピーし、変数部分を都道府県に合わせてみたのですが、返り値が戻ってこないのか、市町村選択も出来ない状態です。

=エラーの場合処理を追加=
上記/*都道府県用に追記した部分*/に、デバッグコードを追加してみましたが、何も表示されません。

=エラーの場合処理を修正=
上記/*都道府県用に追記した部分*/に、.fail(function(jqXHR, textStatus, errorThrown)が漏れておりました。
すいません

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • wimaru

    2018/11/02 01:38 編集

    ご返信ありがとうございます。明日朝一で確認して、またご返信させていただきます。
    どうしようもなく途方に暮れておりました、ご返信頂けるだけで、本当にありがたいです、

    ありがとうございます。

    キャンセル

  • colling

    2018/11/02 09:20

    すいません。ちらっと目で追っているのですが、都道府県の配列はどこにあるのでしょう?

    キャンセル

  • wimaru

    2018/11/03 15:23 編集

    mts10806さま。
    ありがとうございます。
    昨日は作業できず返信が今日になってしまいすいませんでした。コンソールにも何も出てきませんでした。
    colling様の言われる通り、書込みの場所がおかしいのかもしれません。
    試してみます。


    collingさま。
    都道府県の配列は、header内にDB接続PHPを入れ、DBから読み込んでforeachで回して一覧で取り込んでおります。select optionのvalueには、DB内にあるarea_idが、県名が書き出されているのも、HTMLソースで確認出来るのですが、追記したscriprが動いておらず、jsonに書き出されていないのでは?という気がしています。

    キャンセル

回答 2

checkベストアンサー

0

ajaxがきちんと動作しているのが前提ですが、
/*都道府県用に追記した部分*/から/*都道府県用に追記した部分*/の中にある、$('.change_city').on('change', function(){のところは、$('.change_area').on('change', function(){とすべきじゃないのでしょうか?

---追記 ---
あとから追加したと思われる、.failの挿入場所もちょっと違っているような気が、、、。

---追記---
.fail.done(の閉じカッコの後にないといけないと思いますので、

$(function () {

  $.ajax({
    url: "shop.php",
    type: "POST",
    dataType: 'json',
    data: {
      city_id: $(".change_city").val(),
      mode: "mail"
    }
  })
  .done(function(data, textStatus, jqXHR){
    $('.change_shop option').remove();
    $.each(data, function(id, name){
      $('.change_shop').append($('<option>').text(name).attr('value', id));
    })
  }).fail(function(jqXHR, textStatus, errorThrown){
    // エラーの場合処理
    $("div.result").text("エラーが発生しました。ステータス:" + jqXHR.status);
  });


  $('.change_city').on('change', function(){
    console.log('shop.phpへ');
    $.ajax({
      url: "shop.php",
      type: "POST",
      dataType: 'json',
      data: {
        school_id: $(".change_city").val(),
        mode: "mail"
      }
    })
    .done(function(data, textStatus, jqXHR){
      $('.change_shop option').remove();
      $.each(data, function(id, name){
        $('.change_shop ').append($('<option>').text(name).attr('value', id));
      })
    }).fail(function(jqXHR, textStatus, errorThrown){
      // エラーの場合処理
      $("div.result").text("エラーが発生しました。ステータス:" + jqXHR.status);
    });
  });
});

ajaxがきちんと動作しているのが前提ですが、
/*都道府県用に追記した部分*/から/*都道府県用に追記した部分*/の中にある、$('.change_city').on('change', function(){のところは、$('.change_area').on('change', function(){とすべきじゃないのでしょうか?

こちらの場所は、自分が書いたものをよく見てください。わかりませんか?

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/03 15:44

    ありがとうございます。
    元々あったajaxはきちんと動作しておりますが、私が追記した部分が動作していないようで…
    .fallの位置がおかしいのでコンソールにすら出ないのは、そのせいでしょうか…
    確認いたします。

    キャンセル

  • 2018/11/04 00:36

    回答に追記しました。

    キャンセル

  • 2018/11/04 11:36

    あ!なるほど。ありがとうございます。
    もうひとつ外に出さないといけなかったんですね。

    /*都道府県用に追記した部分*/~/*都道府県用に追記した部分*/のところですが、
    都道府県のselect optionを変更したいのではなく(都道府県のselect optionはDBからすでに取得済み)
    なので、$('.change_city').on('change', function(){かと思っていたのですが、
    確かに、都道府県(area)の変更が変わったら…という形なので
    $('.change_area').on('change', function(){ ですね。

    やってみます。ありがとうございます。

    キャンセル

  • 2018/11/04 11:42

    です(^^

    キャンセル

0

流れは3段階

  1. selectのchangeでajaxを利用して処理するのは理解されているようす
  2. ajaxでパラメータをphpに渡し、MySQLからデータを抽出、optionのリストをHTMLで返す
  3. 次のセレクトボックスの値をクリアし受け取ったデータを当てはめる
<select id="s1" name="s1">
<option value="">---</option>
<option value="1">東京</option>
<option value="2">神奈川</option>
<option value="3">埼玉</option>
</select>
<select id="s2" name="s2">
<option value="">---</option>
</select>
<select id="s3" name="s3">
<option value="">---</option>
</select>

受け側をdata.phpとすると

  • s1を変更時はdata.php?s1=xxxのようなデータを渡してs2とs3のデータをクリア後、s2に
    data.phpから受け取ったリストを流し込む
  • s2を変更時はdata.php?s2=yyyのようなデータを渡してs3のデータをクリア後、s3に
    data.phpから受け取ったリストを流し込む

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • この投稿は削除されました

  • 2018/11/03 15:41

    ありがとうございます。
    すいません。
    動作的には、リアルタイムに選択肢を変更したいので、on('change' でデータをjsonに書き出したいと考えております。
    URLに?s1=xxxを渡すには、submitが必要かと思っていたのですが、何かやり方がありますでしょうか?
    知識不足ですいません。

    キャンセル

  • 2018/11/03 15:42

    すいません。2回投稿してしまいました…

    キャンセル

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

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

関連した質問

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