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

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

新規登録して質問してみよう
ただいま回答率
85.51%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

6877閲覧

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

wimaru

総合スコア16

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/11/01 12:57

編集2018/11/01 14:57

前提・実現したいこと

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)が漏れておりました。
すいません

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/11/01 13:22

「動かなかった」はいいとして起きている現象を追記してください。今のところAjaxは成功前提でdoneしか書かれていませんが、失敗した場合に何が起きているか例外などを拾うためにfailは必須です。failを設置し、デバッグを行ってください。
wimaru

2018/11/01 13:35

ありがとうございます。追記したものを追加しました。
m.ts10806

2018/11/01 14:31

右記は確認してみましたか?→今のところAjaxは成功前提でdoneしか書かれていませんが、失敗した場合に何が起きているか例外などを拾うためにfailは必須です。failを設置し、デバッグを行ってください。
m.ts10806

2018/11/01 14:32

返り値がどうなってるかどうかはデバッグすればわかります。
wimaru

2018/11/01 14:45

エラー処理を入れ込んでみましたが、それすらも表示されません。
wimaru

2018/11/01 14:57

教えていただいたURLを元に、入れ込んでみましたが、やはり何も表示されません。すいません。
m.ts10806

2018/11/01 15:03 編集

ブラウザ開発ツールのコンソールに何もでてないですが出てないですか?エラーとか。console.logでdoneなりfailで受け取った変数をデバッグすれば何かしらわかりそうなものですが。area.phpに対してのajaxでも同様に入れてみてください。「何も表示されません」だと今のところだとどこまで想定通りなのかわかりませんので。
wimaru

2018/11/01 16:39 編集

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

2018/11/02 00:20

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

2018/11/03 06:44 編集

mts10806さま。 ありがとうございます。 昨日は作業できず返信が今日になってしまいすいませんでした。コンソールにも何も出てきませんでした。 colling様の言われる通り、書込みの場所がおかしいのかもしれません。 試してみます。 collingさま。 都道府県の配列は、header内にDB接続PHPを入れ、DBから読み込んでforeachで回して一覧で取り込んでおります。select optionのvalueには、DB内にあるarea_idが、県名が書き出されているのも、HTMLソースで確認出来るのですが、追記したscriprが動いておらず、jsonに書き出されていないのでは?という気がしています。
guest

回答2

0

流れは3段階
0. selectのchangeでajaxを利用して処理するのは理解されているようす
0. ajaxでパラメータをphpに渡し、MySQLからデータを抽出、optionのリストをHTMLで返す
0. 次のセレクトボックスの値をクリアし受け取ったデータを当てはめる

HTML

1<select id="s1" name="s1"> 2<option value="">---</option> 3<option value="1">東京</option> 4<option value="2">神奈川</option> 5<option value="3">埼玉</option> 6</select> 7<select id="s2" name="s2"> 8<option value="">---</option> 9</select> 10<select id="s3" name="s3"> 11<option value="">---</option> 12</select>

受け側をdata.phpとすると

  • s1を変更時はdata.php?s1=xxxのようなデータを渡してs2とs3のデータをクリア後、s2に

data.phpから受け取ったリストを流し込む

  • s2を変更時はdata.php?s2=yyyのようなデータを渡してs3のデータをクリア後、s3に

data.phpから受け取ったリストを流し込む

投稿2018/11/02 03:49

yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wimaru

2018/11/03 06:41

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

2018/11/03 06:42

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

0

ベストアンサー

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

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

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

javascript

1$(function () { 2 3 $.ajax({ 4 url: "shop.php", 5 type: "POST", 6 dataType: 'json', 7 data: { 8 city_id: $(".change_city").val(), 9 mode: "mail" 10 } 11 }) 12 .done(function(data, textStatus, jqXHR){ 13 $('.change_shop option').remove(); 14 $.each(data, function(id, name){ 15 $('.change_shop').append($('<option>').text(name).attr('value', id)); 16 }) 17 }).fail(function(jqXHR, textStatus, errorThrown){ 18 // エラーの場合処理 19 $("div.result").text("エラーが発生しました。ステータス:" + jqXHR.status); 20 }); 21 22 23 $('.change_city').on('change', function(){ 24 console.log('shop.phpへ'); 25 $.ajax({ 26 url: "shop.php", 27 type: "POST", 28 dataType: 'json', 29 data: { 30 school_id: $(".change_city").val(), 31 mode: "mail" 32 } 33 }) 34 .done(function(data, textStatus, jqXHR){ 35 $('.change_shop option').remove(); 36 $.each(data, function(id, name){ 37 $('.change_shop ').append($('<option>').text(name).attr('value', id)); 38 }) 39 }).fail(function(jqXHR, textStatus, errorThrown){ 40 // エラーの場合処理 41 $("div.result").text("エラーが発生しました。ステータス:" + jqXHR.status); 42 }); 43 }); 44});

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

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

投稿2018/11/02 00:53

編集2018/11/03 15:36
colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wimaru

2018/11/03 06:44

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

2018/11/03 15:36

回答に追記しました。
wimaru

2018/11/04 02:36

あ!なるほど。ありがとうございます。 もうひとつ外に出さないといけなかったんですね。 /*都道府県用に追記した部分*/~/*都道府県用に追記した部分*/のところですが、 都道府県のselect optionを変更したいのではなく(都道府県のselect optionはDBからすでに取得済み) なので、$('.change_city').on('change', function(){かと思っていたのですが、 確かに、都道府県(area)の変更が変わったら…という形なので $('.change_area').on('change', function(){ ですね。 やってみます。ありがとうございます。
colling

2018/11/04 02:42

です(^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問