複数のドロップダウンリストについて

###前提・実現したいこと
PHPとJQUERYで多段階のドロップダウンリストを実装しようとしておりますが、不明点があり、実現できておりません。

###発生している問題・エラーメッセージ
１．部門マスタから取引先の選択までは、Teratail先生におしえていただいて正しく機能していますが、３段階目の発注区分での絞り込みで選択部門＋選択取引先でSELECTする方法がわかりません。
（jqueryからPHPに２つのパラメータを渡す方法がわからずにいます。）
また、最初は、選択部門のみで絞り込み選択できるのですが、SUBMITをすると、Selectedされず、----選択してください----のDEFAULTの
状態になります。

２．発注区分の次に店の選択をしますが、上記同様に選択部門＋選択取引先＋選択発注区分でSELECTする方法がわかりません。選択部門で絞り込み選択できるのですが、SUBMITをすると、Selectedされず、----選択してください----のDEFAULTの状態になります。

エラーメッセージ

###該当のソースコード

PHP
1<?php
2/**
3 * index.php
4 */
5ini_set('display_errors', 1);
6require 'common.php';
7
8// 商品リストを検索
9
10$sql_items = 'SELECT dpt, dptmein FROM dpt_mast';
11//print 'ＤＰＴマスタ select';
12//var_dump($sql_items);
13$arrItems = select($sql_items);
14//var_dump($arrItems);
15
16
17// 購入履歴の検索
18if (filter_input(INPUT_SERVER, 'REQUEST_METHOD') === 'POST') {
19
20	$arr = array();
21	
22	$sql_trading = 'SELECT ';
23	$sql_trading .= 'SUM(t.hatchusu) AS quantity';
24	$sql_trading .= ', s.venmein as shop_name ';
25	$sql_trading .= ', i.dptmein as item_name ';
26	$sql_trading .= ', l.linmein as lin_name ';
27	$sql_trading .= 'FROM VM_nouhin_jisseki t ';
28	$sql_trading .= 'INNER JOIN ven_mast s ON s.ven = t.ven ';
29	$sql_trading .= 'INNER JOIN dpt_mast i ON i.dpt = t.dpt ';
30	$sql_trading .= 'INNER JOIN lin_mast l ON l.lin = t.lin ';
31//	$sql_trading .= 'WHERE 1 ';
32	$sql_trading .= 'WHERE 1=1 ';
33
34	if (0 < filter_input(INPUT_POST, 'shop')) {
35		$sql_trading .= 'AND t.ven = :shop_id ';
36		$arr[':shop_id'] = filter_input(INPUT_POST, 'shop');
37	}
38	if (0 < filter_input(INPUT_POST, 'item')) {
39		$sql_trading .= 'AND t.dpt = :item_id ';
40		$arr[':item_id'] = filter_input(INPUT_POST, 'item');
41	}
42		if (0 < filter_input(INPUT_POST, 'hatukbn')) {
43		$sql_trading .= 'AND t.hatukbn = :hatukbn ';
44		$arr[':hatukbn'] = filter_input(INPUT_POST, 'hatukbn');
45	}
46		if (0 < filter_input(INPUT_POST, 'ten')) {
47		$sql_trading .= 'AND t.ten = :ten ';
48		$arr[':ten'] = filter_input(INPUT_POST, 'ten');
49	}
50	
51//	$sql_trading .= 'GROUP BY t.shop_id,t.item_id,t.lin_id ';
52	$sql_trading .= 'GROUP BY s.venmein,i.dptmein,l.linmein';
53	
54	$arrTradings = select($sql_trading, $arr);
55//	var_dump($sql_trading);
56}
57?><!DOCTYPE HTML>
58<html lang="ja">
59	<head>
60		<meta charset="UTF-8">
61		<title>Ajaxサンプル</title>
62		<style type="text/css">
63			table {
64				border-collapse: collapse;
65				width: 600px;
66			}
67			table th, table td {
68				border: 1px solid #CCC;
69			}
70		</style>
71	</head>
72	<body>
73		<form method="post">
74			<p>
75				<label for="item">ＤＰＴ</label>
76				<select name="item" id="item">
77					<option value="">---- 選択してください ----</option>
78					
79					<?php foreach ($arrItems as $item) : ?>
80
81						<?php if ($item['dpt'] == filter_input(INPUT_POST, 'item')): ?>
82							<option value="<?= h($item['dpt']); ?>" selected="selected">
83								<?= h($item['dptmein']); ?>
84							</option>
85						<?php else: ?>
86							<option value="<?= h($item['dpt']); ?>">
87								<?= h($item['dptmein']); ?>
88							</option>
89						<?php endif; ?>
90
91					<?php endforeach; ?>
92				</select>
93			</p>
94			<p>
95				<label for="shop">取引先</label>
96				<select name="shop" id="shop" data-default="<?= h(filter_input(INPUT_POST, 'shop')) ?>">
97					<option value="">---------- 選択してください ----------</option>
98				</select>
99			</p>
100			<p>
101				<label for="hatukbn">発注区分</label>
102				<select name="hatukbn" id="hatukbn" data-default="<?= h(filter_input(INPUT_POST, 'hatukbn')) ?>">
103					<option value="">---------- 選択してください ----------</option>
104				</select>
105			</p>
106			<p>
107				<label for="ten">店舗</label>
108				<select name="ten" id="ten" data-default="<?= h(filter_input(INPUT_POST, 'ten')) ?>">
109					<option value="">---------- 選択してください ----------</option>
110				</select>
111			</p>
112			<p>
113				<button type="submit">
114					検索
115				</button>
116			</p>
117		</form>
118		<div>
119			<?php if (isset($arrTradings)): ?>
120				<table>
121					<thead>
122						<tr>
123							<th>取引先</th>	
124							<th>ＤＰＴ</th>
125							<th>ライン</th>
126							<th>発注数量</th>
127						</tr>
128					</thead>
129					<tbody>
130						<?php foreach ($arrTradings as $trading) : ?>
131							<tr>
132								<td><?= h($trading['shop_name']); ?></td>
133								<td><?= h($trading['item_name']); ?></td>
134								<td><?= h($trading['lin_name']); ?></td>
135								<td><?= h($trading['quantity']); ?></td>
136							</tr>
137						<?php endforeach; ?>
138					</tbody>
139				</table>
140			<?php endif; ?>
141		</div>
142		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
143		<script type="text/javascript">
144			$(function () {
145				// id="item" が change イベントを発行したとき
146				$('#item').on('change', function () {
147					var params = {
148						id: $(this).val()
149					};
150					$.getJSON('ajax.php', params, function (json) {
151
152						// 初期表示
153						var opt = $('<option>');
154						opt.text('---------- 選択してください ----------');
155
156						// 一旦空にしておく
157						$("#shop").empty()
158								.append(opt);
159
160						// 検索結果をSELECTに追加
161						$.each(json, function (i, res) {
162							var opt = $('<option>');
163							opt.val(res.ven)
164									.text(res.venmein)
165									.appendTo($("#shop"));
166						});
167
168						if (0 < $("#shop").attr('data-default')) {
169							$("#shop").val($("#shop").attr('data-default'));
170						}
171					});
172				}).change();
173			});
174			$(function () {
175				// id="shop" が change イベントを発行したとき
176				$('#shop').on('change', function () {
177					var params = {
178						shop: $(this).val()
179					};
180					$.getJSON('ajax2.php', params, function (json) {
181
182						// 初期表示
183						var opt = $('<option>');
184						opt.text('---------- 選択してください ----------');
185
186						// 一旦空にしておく
187						$("#hatukbn").empty()
188								.append(opt);
189
190						// 検索結果をSELECTに追加
191						$.each(json, function (i, res) {
192							var opt = $('<option>');
193							opt.val(res.hatukbn)
194									.text(res.hatukbn)
195									.appendTo($("#hatukbn"));
196						});
197
198						if (0 < $("#hatukbn").attr('data-default')) {
199							$("#hatukbn").val($("#hatukbn").attr('data-default'));
200						}
201					});
202				}).change();
203			});
204			$(function () {
205				// id="hatukbn" が change イベントを発行したとき
206				$('#hatukbn').on('change', function () {
207					var params = {
208						hatukbn: $(this).val()
209					};
210					$.getJSON('ajax3.php', params, function (json) {
211
212						// 初期表示
213						var opt = $('<option>');
214						opt.text('---------- 選択してください ----------');
215
216						// 一旦空にしておく
217						$("#ten").empty()
218								.append(opt);
219
220						// 検索結果をSELECTに追加
221						$.each(json, function (i, res) {
222							var opt = $('<option>');
223							opt.val(res.ten)
224									.text(res.tenmei)
225									.appendTo($("#ten"));
226						});
227
228						if (0 < $("#ten").attr('data-default')) {
229							$("#ten").val($("#ten").attr('data-default'));
230						}
231					});
232				}).change();
233			});
234		</script>
235	</body>
236</html>

PHP
1<?php
2
3/**
4 * ajax.php これは、実現したいことができています。
5 */
6ini_set('display_errors', 1);
7require 'common.php';
8
9//$sql_trading = 'SELECT shop_id, shop.name ';
10$sql_trading = 'SELECT DISTINCT(VM_nouhin_jisseki.ven), ven_mast.venmein ';
11$sql_trading .= 'FROM VM_nouhin_jisseki ';
12$sql_trading .= 'INNER JOIN ven_mast ON ven_mast.ven = VM_nouhin_jisseki.ven ';
13$sql_trading .= 'WHERE dpt = :item_id';
14//$sql_trading .= 'GROUP BY shop_id,item_id ';
15
16$arrParams = array(
17	':item_id' => filter_input(INPUT_GET, 'id')
18);
19$arrItems = select($sql_trading, $arrParams);
20
21header('Content-type: application/json');
22echo json_encode($arrItems);

PHP
1<?php
2
3/**
4 * ajax2.php
5 */
6ini_set('display_errors', 1);
7require 'common.php';
8
9$sql_trading = 'SELECT DISTINCT(t.hatukbn) ';
10$sql_trading .= 'FROM VM_nouhin_jisseki t ';
11//$sql_trading .= 'WHERE dpt = :item_id';
12  $sql_trading .= 'WHERE ven = :shop_id';
13//$sql_trading .= 'WHERE 1=1 ';
14//$sql_trading .= 'GROUP BY shop_id,item_id ';
15
16$arrParams = array(
17//  ':item_id' => filter_input(INPUT_GET, 'id'), 
18	':shop_id' => filter_input(INPUT_GET, 'shop') 
19); 
20$arrItems = select($sql_trading, $arrParams);
21
22header('Content-type: application/json');
23echo json_encode($arrItems);

PHP
1<?php
2
3/**
4 * ajax3.php
5 */
6ini_set('display_errors', 1);
7require 'common.php';
8
9$sql_trading = 'SELECT DISTINCT(t.ten),tenmei ';
10$sql_trading .= 'FROM VM_nouhin_jisseki t ';
11//$sql_trading .= 'WHERE dpt = :item_id';
12//$sql_trading .= 'WHERE ten = :ten_id';
13  $sql_trading .= 'WHERE hatukbn = :hatukbn_id';
14//$sql_trading .= 'WHERE 1=1 ';
15//$sql_trading .= 'GROUP BY shop_id,item_id ';
16
17$arrParams = array(
18//  ':item_id' => filter_input(INPUT_GET, 'id'), 
19	':hatukbn_id' => filter_input(INPUT_GET, 'hatukbn') 
20); 
21$arrItems = select($sql_trading, $arrParams);
22
23header('Content-type: application/json');
24echo json_encode($arrItems);
25

###試したこと
ajax2.phpで
$arrParams = array(に複数の項目を入れようとしましたが、エラーになりました。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

PHP Version 5.4.45
IIS 7.0
SQL Server 2008 R2 Express

行動規範の内容に同意します

回答2件

もっと簡単な例から徐々に広げていかないと知識もスキルも追いついてないですよね？

とりあえずSQLの部分は一度おいておいて、以下のような参照モデルを検討してみてはどうでしょうか？

main.php

PHP
1<script src="js/jquery.js"></script>
2<script>
3$(function(){
4  $('select[name=item]').on('change',function(){
5    var data={
6    item:$(this).val(),
7    };
8    setchild($(this),'shop',data);
9    $(this).closest('form').find('select[name=hatukbn]').prop('disabled',true).prop('selectedIndex',0);
10    $(this).closest('form').find('select[name=ten]').prop('disabled',true).prop('selectedIndex',0);
11  });
12  $('select[name=shop]').on('change',function(){
13    var data={
14    item:$(this).closest('form').find('select[name=item]').val(),
15    shop:$(this).val(),
16    };
17    setchild($(this),'hatukbn',data);
18    $(this).closest('form').find('select[name=ten]').prop('disabled',true).prop('selectedIndex',0);
19  });
20  $('select[name=hatukbn]').on('change',function(){
21    var data={
22    item:$(this).closest('form').find('select[name=item]').val(),
23    shop:$(this).closest('form').find('select[name=shop]').val(),
24    hatukbn:$(this).val(),
25    };
26    setchild($(this),'ten',data);
27  });
28});
29
30function setchild(me,child_name,data){
31  var child_obj=me.closest('form').find('select[name='+child_name+']');
32  child_obj.prop('selectedIndex',0);
33  if($(this).prop('selectedIndex')==0){
34    child_obj.prop('disabled',true);
35  }else{
36    child_obj.prop('disabled',false);
37    $.ajax({
38    url:"sub.php",
39    data:data,
40    dataType:"json",
41    type:"post",
42    async: false,
43    success:function(datas){
44      child_obj.find('option').each(function(){
45        if(child_obj.find('option').index(this)>0){
46          $(this).remove();
47        };
48      });
49      for(var i=0;i<datas.length;i++){
50        $('<option>').attr('value',datas[i]['value']).text(datas[i]['text']).appendTo(child_obj);
51      };
52    },
53    });
54  }
55}
56</script>
57<form method="post">
58<p>
59ＤＰＴ
60<select name="item">
61<option value="">---- 選択してください ----</option>
62<option value="1">DTP1</option>
63<option value="2">DTP2</option>
64<option value="3">DTP3</option>
65</select>
66</p>
67<p>
68取引先
69<select name="shop" disabled>
70<option value="">---------- 選択してください ----------</option>
71</select>
72</p>
73<p>
74発注区分
75<select name="hatukbn" disabled>
76<option value="">---------- 選択してください ----------</option>
77</select>
78</p>
79<p>
80店舗</label>
81<select name="ten" disabled>
82<option value="">---------- 選択してください ----------</option>
83</select>
84</p>
85<p>
86<button type="submit">
87検索
88</button>
89</p>
90</form>

#sub調整

sub.php

PHP
1$item   =filter_input(INPUT_POST,"item"   ,FILTER_DEFAULT,["options"=>["default"=>null]]);
2$shop   =filter_input(INPUT_POST,"shop"   ,FILTER_DEFAULT,["options"=>["default"=>null]]);
3$hatukbn=filter_input(INPUT_POST,"hatukbn",FILTER_DEFAULT,["options"=>["default"=>null]]);
4if(!is_null($hatukbn) and !is_null($shop) and !is_null($item)){
5  $sql ="SELECT ten_id as value,ten_name as text FROM テーブルA ";
6  $sql.="WHERE 1 ";
7  $sql.="AND item_id=? ";
8  $sql.="AND shop_id=? ";
9  $sql.="AND hatukbn_id=? ";
10  $stmt = $pdo->prepare($sql);
11  $stmt->execute([$item,$shop,$hatukbn]);
12}elseif(!is_null($shop) and !is_null($item)){
13  $sql ="SELECT hatukbn_id as value,hatukbn_name as text FROM テーブルB ";
14  $sql.="WHERE 1 ";
15  $sql.="AND item_id=? ";
16  $sql.="AND shop_id=? ";
17  $stmt = $pdo->prepare($sql);
18  $stmt->execute([$item,$shop]);
19}elseif(!is_null($item)){
20  $sql ="SELECT shop_id as value,shop_name as text FROM テーブルC ";
21  $sql.="WHERE 1 ";
22  $sql.="AND item_id=? ";
23  $stmt= $pdo->prepare($sql);
24  $stmt->execute([$item]);
25}
26if($stmt){
27  $rows=$stmt->fetchAll(PDO::FETCH_ASSOC);
28  print json_encode($rows);
29}else{
30  print json_encode((object)[]);
31}
32?>

投稿2016/11/28 11:03

編集2016/12/02 13:39

yambejp

総合スコア114823

juriparu0411

2016/11/28 12:01

詳細なソースとご回答ありがとうございます。後程、試してみます。ただ、今回、どうしても、動的にデータを取得する必要があり、SQLの記述が不可欠になります。

yambejp

2016/11/28 12:31

いや、そうではなくて・・・データの受け渡しができるところまでできるようになってからSQLのデータ抽出のところに着手してくださいということです。もし今回のものでデータの渡し方は理解できたなら、後はsub.phpからパラメータを利用してSQLでデータを取ってくるだけですから簡単ですよね？

yambejp

2016/11/28 12:36

今回のケースですと大きく４つのステップで作業を進めます。 (1)HTMLの構成を理解する (2)UI（ユーザーインターフェース）としてjQueryでHTMLを制御する (3)ajaxでデータの受け渡しをする（今回のサンプルは、ダミーデータをつかってデータ取得） (4)SQLにて検索システムを確立する (5)ajaxの要求にあわせた形式でjsonデータを返す今回の例示は(1)~(3)までできるように書いたつもりです。ここまでが理解できないならSQLでどんなデータを持ってきても無駄です

juriparu0411

2016/11/28 12:41

理解が足らず、的はずれな返信をしてしまい失礼致しました。ご提示いただいたステップで取り組んでみます。ありがとうございました。

juriparu0411

2016/11/30 05:28

>後はsub.phpからパラメータを利用してSQLでデータを取ってくるだけですから簡単ですよね？これが理解できていないのですが、SUB.PHPにパラメータを渡し、「SHOP」「HATU」「TEN」の３パターンＳＱＬを記述できるということでしょうか？もし、よろしければ、（4）（5）のヒントをいただけませんでしょうか？

yambejp

2016/11/30 10:49

(4)の調整版をアップしました命題がおかしいのか私の理解が間違っているかわかりませんが main.phpからsub.phpには複数のパラメータ渡したいんじゃなかったんでしたっけ？ ajax1~3.phpを見るとパラメータ１つしか渡ってないように見えますが一応sub.phpは複数のパラメータを受けた場合の処理をかいてありますただし条件分岐については、selectのchangeトリガーに対して特定のパラメータをつけてsubに渡したほうが確実な分岐ができそうな気がします

juriparu0411

2016/11/30 12:29

(4)の調整版のコメントありがとうございます。ご指摘のとおり、当方が超初心者のため、ajax1~3.phpの記述で一つのパラメータしか渡していませんが、ajax2.phpでは、itemとSHOP、ajax３.phpでは、itemとSHOPとHATUを渡そうと考えておりました。（実装方法がわからず、ソース上では、パラメータが一つになっていました。）引き続き、勉強させていただきます。

juriparu0411

2016/12/02 07:51

yambejp様、当方の理解が足らず、おしえていただいたソースでデベロッパーツールで動きを確認させていただきました。このソースに「sub.phpからパラメータを利用してSQLでデータを取ってくる」と「条件分岐については、selectのchangeトリガーに対して特定のパラメータをつけてsubに渡す」について（5）のアプローチをご指導いただけないでしょうか？あつかましいお願いなのは重々承知しております。これを完成させれば、次のステップが見えてくるので何卒よろしくお願いいたします。

yambejp

2016/12/02 08:40

うまく追記ができないのでsubを書き換えました (5)の要件にあわせ、欲しいデータ形式でjsonデータを返してもらえばいいでしょう具体的なテストができないため想像で書いているので環境に合わせて置き換えてください

juriparu0411

2016/12/02 09:17

yambejp様、本当にありがとうございます。書き換えいただいたsub.phpに倣ってテーブルを作成し、動作を確認してみます。レベルが低い質問ばかりで申し訳ありませんでした。

juriparu0411

2016/12/03 13:31

yambejp様、再三にわたりご指導ありがとうございました。もう少しのところまできました。Cromeのデベロッパーツールでsub.phpのPreviewを見ると、「string(1) "1" object(PDOStatement)#2 (1) { ["queryString"]=> string(80) "SELECT shop_id as value,shop_name as text FROM sub_shop WHERE 1=1 AND item_id=? " } [{"value":"1","text":"shop-1-1"},{"value":"2","text":"shop-2-1"},{"value":"3","text":"shop-3-1"}]」が表示されますが、ドロップダウンリストには出てきません。これが何故かわかるとありがたいのですが。。。

juriparu0411

2016/12/03 14:44

yambejp様、上記の疑問点が解消いたしました。不要な個所にvar_dumpを入れたためでした。失礼いたしました。

yambejp

2016/12/05 00:23

(4)の作業は、ajaxではなく実際にpostして出力を確認することでもデバッグできます。適当なパラメータをおくってjsonがかえってくるまでsub上のデバッグ処理になりますので根気強くバグをとってください

行動規範の内容に同意します

ajax2.phpで
$arrParams = array(に複数の項目を入れようとしましたが、エラーになりました。

具体的にどのように記述してどのようなエラーメッセージだったのでしょうか？

単純に、ajax2.phpにリクエストを投げるときのパラメーターに id をセットしていないだけでは？

javascript
1// ・・・略・・・ フロントのコーディングは本職じゃないので間違いがあるかも。間違ってたら適当に治してください。
2            $(function () {
3                // id="shop" が change イベントを発行したとき
4                $('#shop').on('change', function () {
5                    var params = {  // idとshopをパラメーターに設定
6                        id:   $("#item option:selected").val(), 
7                        shop: $(this).val()
8                    };
9                    $.getJSON('ajax2.php', params, function (json) {
10// ・・・略・・・
11

php
1// ・・・略・・・ SQL文が正しいかどうかは検証していません。
2$sql_trading  = 'SELECT DISTINCT(t.hatukbn) ';
3$sql_trading .= 'FROM VM_nouhin_jisseki t ';
4$sql_trading .= 'WHERE dpt = :item_id ';
5$sql_trading .= '  and ven = :shop_id ';
6// ・・・略・・・
7$arrParams = array(
8    ':item_id' => filter_input(INPUT_GET, 'id'), 
9    ':shop_id' => filter_input(INPUT_GET, 'shop') 
10); 
11// ・・・略・・・

投稿2016/11/28 09:44

編集2016/11/28 09:57

Y.H.

総合スコア7914

juriparu0411

2016/11/28 10:03

早速のご回答ありがとうございます。当方の環境で、上記ステートメントを追記しますとajax2.php で次のエラーが出ます。 PHP Fatal error: Uncaught exception 'PDOException' with message 'SQLSTATE[HY093]: Invalid parameter number: parameter was not defined' in C:\inetpub\wwwroot\php\pdo_hattyuu\common.php:58 Stack trace: #0 C:\inetpub\wwwroot\php\pdo_hattyuu\common.php(58): PDOStatement->execute(Array) #1 C:\inetpub\wwwroot\php\pdo_hattyuu\ajax2.php(20): select('SELECT DISTINCT...', Array) #2 {main} thrown in C:\inetpub\wwwroot\php\pdo_hattyuu\common.php on line 58 単純なエラーなので、タイプミスしていますでしょうか？

Y.H.

2016/11/28 12:06

common.phpで定義されているselect()の実装がどうなっているのか解らないので何ともお答えできません。 $arrItems = select($sql_trading, $arrParams); の直前に var_dump($arrParams); などを入れて想定したものが設定されているのであれば、 common.phpのselect()の使用方法が間違っているのでしょう。 select()の仕様を確認し修正ください。（これはここで質問されても誰も回答できないものなので質問者さんご自身で解決するしかないと思います。）

juriparu0411

2016/11/28 12:44

早速のご返信ありがとうございます。ご指摘のとおり、こちらで確認致します。

行動規範の内容に同意します

あなたの回答