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

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

ただいまの
回答率

90.01%

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,400

juriparu0411

score 12

前提・実現したいこと

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

発生している問題・エラーメッセージ

1.部門マスタから取引先の選択までは、Teratail先生におしえていただいて正しく機能していますが、3段階目の発注区分での絞り込みで選択部門+選択取引先でSELECTする方法がわかりません。
(jqueryからPHPに2つのパラメータを渡す方法がわからずにいます。)
また、最初は、選択部門のみで絞り込み選択できるのですが、SUBMITをすると、Selectedされず、----選択してください----のDEFAULTの
状態になります。

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

エラーメッセージ

該当のソースコード

<?php
/**
 * index.php
 */
ini_set('display_errors', 1);
require 'common.php';

// 商品リストを検索

$sql_items = 'SELECT dpt, dptmein FROM dpt_mast';
//print 'DPTマスタ select';
//var_dump($sql_items);
$arrItems = select($sql_items);
//var_dump($arrItems);


// 購入履歴の検索
if (filter_input(INPUT_SERVER, 'REQUEST_METHOD') === 'POST') {

    $arr = array();

    $sql_trading = 'SELECT ';
    $sql_trading .= 'SUM(t.hatchusu) AS quantity';
    $sql_trading .= ', s.venmein as shop_name ';
    $sql_trading .= ', i.dptmein as item_name ';
    $sql_trading .= ', l.linmein as lin_name ';
    $sql_trading .= 'FROM VM_nouhin_jisseki t ';
    $sql_trading .= 'INNER JOIN ven_mast s ON s.ven = t.ven ';
    $sql_trading .= 'INNER JOIN dpt_mast i ON i.dpt = t.dpt ';
    $sql_trading .= 'INNER JOIN lin_mast l ON l.lin = t.lin ';
//    $sql_trading .= 'WHERE 1 ';
    $sql_trading .= 'WHERE 1=1 ';

    if (0 < filter_input(INPUT_POST, 'shop')) {
        $sql_trading .= 'AND t.ven = :shop_id ';
        $arr[':shop_id'] = filter_input(INPUT_POST, 'shop');
    }
    if (0 < filter_input(INPUT_POST, 'item')) {
        $sql_trading .= 'AND t.dpt = :item_id ';
        $arr[':item_id'] = filter_input(INPUT_POST, 'item');
    }
        if (0 < filter_input(INPUT_POST, 'hatukbn')) {
        $sql_trading .= 'AND t.hatukbn = :hatukbn ';
        $arr[':hatukbn'] = filter_input(INPUT_POST, 'hatukbn');
    }
        if (0 < filter_input(INPUT_POST, 'ten')) {
        $sql_trading .= 'AND t.ten = :ten ';
        $arr[':ten'] = filter_input(INPUT_POST, 'ten');
    }

//    $sql_trading .= 'GROUP BY t.shop_id,t.item_id,t.lin_id ';
    $sql_trading .= 'GROUP BY s.venmein,i.dptmein,l.linmein';

    $arrTradings = select($sql_trading, $arr);
//    var_dump($sql_trading);
}
?><!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Ajaxサンプル</title>
        <style type="text/css">
            table {
                border-collapse: collapse;
                width: 600px;
            }
            table th, table td {
                border: 1px solid #CCC;
            }
        </style>
    </head>
    <body>
        <form method="post">
            <p>
                <label for="item">DPT</label>
                <select name="item" id="item">
                    <option value="">---- 選択してください ----</option>

                    <?php foreach ($arrItems as $item) : ?>

                        <?php if ($item['dpt'] == filter_input(INPUT_POST, 'item')): ?>
                            <option value="<?= h($item['dpt']); ?>" selected="selected">
                                <?= h($item['dptmein']); ?>
                            </option>
                        <?php else: ?>
                            <option value="<?= h($item['dpt']); ?>">
                                <?= h($item['dptmein']); ?>
                            </option>
                        <?php endif; ?>

                    <?php endforeach; ?>
                </select>
            </p>
            <p>
                <label for="shop">取引先</label>
                <select name="shop" id="shop" data-default="<?= h(filter_input(INPUT_POST, 'shop')) ?>">
                    <option value="">---------- 選択してください ----------</option>
                </select>
            </p>
            <p>
                <label for="hatukbn">発注区分</label>
                <select name="hatukbn" id="hatukbn" data-default="<?= h(filter_input(INPUT_POST, 'hatukbn')) ?>">
                    <option value="">---------- 選択してください ----------</option>
                </select>
            </p>
            <p>
                <label for="ten">店舗</label>
                <select name="ten" id="ten" data-default="<?= h(filter_input(INPUT_POST, 'ten')) ?>">
                    <option value="">---------- 選択してください ----------</option>
                </select>
            </p>
            <p>
                <button type="submit">
                    検索
                </button>
            </p>
        </form>
        <div>
            <?php if (isset($arrTradings)): ?>
                <table>
                    <thead>
                        <tr>
                            <th>取引先</th>    
                            <th>DPT</th>
                            <th>ライン</th>
                            <th>発注数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($arrTradings as $trading) : ?>
                            <tr>
                                <td><?= h($trading['shop_name']); ?></td>
                                <td><?= h($trading['item_name']); ?></td>
                                <td><?= h($trading['lin_name']); ?></td>
                                <td><?= h($trading['quantity']); ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            <?php endif; ?>
        </div>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                // id="item" が change イベントを発行したとき
                $('#item').on('change', function () {
                    var params = {
                        id: $(this).val()
                    };
                    $.getJSON('ajax.php', params, function (json) {

                        // 初期表示
                        var opt = $('<option>');
                        opt.text('---------- 選択してください ----------');

                        // 一旦空にしておく
                        $("#shop").empty()
                                .append(opt);

                        // 検索結果をSELECTに追加
                        $.each(json, function (i, res) {
                            var opt = $('<option>');
                            opt.val(res.ven)
                                    .text(res.venmein)
                                    .appendTo($("#shop"));
                        });

                        if (0 < $("#shop").attr('data-default')) {
                            $("#shop").val($("#shop").attr('data-default'));
                        }
                    });
                }).change();
            });
            $(function () {
                // id="shop" が change イベントを発行したとき
                $('#shop').on('change', function () {
                    var params = {
                        shop: $(this).val()
                    };
                    $.getJSON('ajax2.php', params, function (json) {

                        // 初期表示
                        var opt = $('<option>');
                        opt.text('---------- 選択してください ----------');

                        // 一旦空にしておく
                        $("#hatukbn").empty()
                                .append(opt);

                        // 検索結果をSELECTに追加
                        $.each(json, function (i, res) {
                            var opt = $('<option>');
                            opt.val(res.hatukbn)
                                    .text(res.hatukbn)
                                    .appendTo($("#hatukbn"));
                        });

                        if (0 < $("#hatukbn").attr('data-default')) {
                            $("#hatukbn").val($("#hatukbn").attr('data-default'));
                        }
                    });
                }).change();
            });
            $(function () {
                // id="hatukbn" が change イベントを発行したとき
                $('#hatukbn').on('change', function () {
                    var params = {
                        hatukbn: $(this).val()
                    };
                    $.getJSON('ajax3.php', params, function (json) {

                        // 初期表示
                        var opt = $('<option>');
                        opt.text('---------- 選択してください ----------');

                        // 一旦空にしておく
                        $("#ten").empty()
                                .append(opt);

                        // 検索結果をSELECTに追加
                        $.each(json, function (i, res) {
                            var opt = $('<option>');
                            opt.val(res.ten)
                                    .text(res.tenmei)
                                    .appendTo($("#ten"));
                        });

                        if (0 < $("#ten").attr('data-default')) {
                            $("#ten").val($("#ten").attr('data-default'));
                        }
                    });
                }).change();
            });
        </script>
    </body>
</html>
<?php

/**
 * ajax.php これは、実現したいことができています。
 */
ini_set('display_errors', 1);
require 'common.php';

//$sql_trading = 'SELECT shop_id, shop.name ';
$sql_trading = 'SELECT DISTINCT(VM_nouhin_jisseki.ven), ven_mast.venmein ';
$sql_trading .= 'FROM VM_nouhin_jisseki ';
$sql_trading .= 'INNER JOIN ven_mast ON ven_mast.ven = VM_nouhin_jisseki.ven ';
$sql_trading .= 'WHERE dpt = :item_id';
//$sql_trading .= 'GROUP BY shop_id,item_id ';

$arrParams = array(
    ':item_id' => filter_input(INPUT_GET, 'id')
);
$arrItems = select($sql_trading, $arrParams);

header('Content-type: application/json');
echo json_encode($arrItems);
<?php

/**
 * ajax2.php
 */
ini_set('display_errors', 1);
require 'common.php';

$sql_trading = 'SELECT DISTINCT(t.hatukbn) ';
$sql_trading .= 'FROM VM_nouhin_jisseki t ';
//$sql_trading .= 'WHERE dpt = :item_id';
  $sql_trading .= 'WHERE ven = :shop_id';
//$sql_trading .= 'WHERE 1=1 ';
//$sql_trading .= 'GROUP BY shop_id,item_id ';

$arrParams = array(
//  ':item_id' => filter_input(INPUT_GET, 'id'), 
    ':shop_id' => filter_input(INPUT_GET, 'shop') 
); 
$arrItems = select($sql_trading, $arrParams);

header('Content-type: application/json');
echo json_encode($arrItems);
<?php

/**
 * ajax3.php
 */
ini_set('display_errors', 1);
require 'common.php';

$sql_trading = 'SELECT DISTINCT(t.ten),tenmei ';
$sql_trading .= 'FROM VM_nouhin_jisseki t ';
//$sql_trading .= 'WHERE dpt = :item_id';
//$sql_trading .= 'WHERE ten = :ten_id';
  $sql_trading .= 'WHERE hatukbn = :hatukbn_id';
//$sql_trading .= 'WHERE 1=1 ';
//$sql_trading .= 'GROUP BY shop_id,item_id ';

$arrParams = array(
//  ':item_id' => filter_input(INPUT_GET, 'id'), 
    ':hatukbn_id' => filter_input(INPUT_GET, 'hatukbn') 
); 
$arrItems = select($sql_trading, $arrParams);

header('Content-type: application/json');
echo json_encode($arrItems);

試したこと

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

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

より詳細な情報

PHP Version 5.4.45
IIS 7.0
SQL Server 2008 R2 Express

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+1

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

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

  • main.php
<script src="js/jquery.js"></script>
<script>
$(function(){
  $('select[name=item]').on('change',function(){
    var data={
    item:$(this).val(),
    };
    setchild($(this),'shop',data);
    $(this).closest('form').find('select[name=hatukbn]').prop('disabled',true).prop('selectedIndex',0);
    $(this).closest('form').find('select[name=ten]').prop('disabled',true).prop('selectedIndex',0);
  });
  $('select[name=shop]').on('change',function(){
    var data={
    item:$(this).closest('form').find('select[name=item]').val(),
    shop:$(this).val(),
    };
    setchild($(this),'hatukbn',data);
    $(this).closest('form').find('select[name=ten]').prop('disabled',true).prop('selectedIndex',0);
  });
  $('select[name=hatukbn]').on('change',function(){
    var data={
    item:$(this).closest('form').find('select[name=item]').val(),
    shop:$(this).closest('form').find('select[name=shop]').val(),
    hatukbn:$(this).val(),
    };
    setchild($(this),'ten',data);
  });
});

function setchild(me,child_name,data){
  var child_obj=me.closest('form').find('select[name='+child_name+']');
  child_obj.prop('selectedIndex',0);
  if($(this).prop('selectedIndex')==0){
    child_obj.prop('disabled',true);
  }else{
    child_obj.prop('disabled',false);
    $.ajax({
    url:"sub.php",
    data:data,
    dataType:"json",
    type:"post",
    async: false,
    success:function(datas){
      child_obj.find('option').each(function(){
        if(child_obj.find('option').index(this)>0){
          $(this).remove();
        };
      });
      for(var i=0;i<datas.length;i++){
        $('<option>').attr('value',datas[i]['value']).text(datas[i]['text']).appendTo(child_obj);
      };
    },
    });
  }
}
</script>
<form method="post">
<p>
DPT
<select name="item">
<option value="">---- 選択してください ----</option>
<option value="1">DTP1</option>
<option value="2">DTP2</option>
<option value="3">DTP3</option>
</select>
</p>
<p>
取引先
<select name="shop" disabled>
<option value="">---------- 選択してください ----------</option>
</select>
</p>
<p>
発注区分
<select name="hatukbn" disabled>
<option value="">---------- 選択してください ----------</option>
</select>
</p>
<p>
店舗</label>
<select name="ten" disabled>
<option value="">---------- 選択してください ----------</option>
</select>
</p>
<p>
<button type="submit">
検索
</button>
</p>
</form>

sub調整

  • sub.php
$item   =filter_input(INPUT_POST,"item"   ,FILTER_DEFAULT,["options"=>["default"=>null]]);
$shop   =filter_input(INPUT_POST,"shop"   ,FILTER_DEFAULT,["options"=>["default"=>null]]);
$hatukbn=filter_input(INPUT_POST,"hatukbn",FILTER_DEFAULT,["options"=>["default"=>null]]);
if(!is_null($hatukbn) and !is_null($shop) and !is_null($item)){
  $sql ="SELECT ten_id as value,ten_name as text FROM テーブルA ";
  $sql.="WHERE 1 ";
  $sql.="AND item_id=? ";
  $sql.="AND shop_id=? ";
  $sql.="AND hatukbn_id=? ";
  $stmt = $pdo->prepare($sql);
  $stmt->execute([$item,$shop,$hatukbn]);
}elseif(!is_null($shop) and !is_null($item)){
  $sql ="SELECT hatukbn_id as value,hatukbn_name as text FROM テーブルB ";
  $sql.="WHERE 1 ";
  $sql.="AND item_id=? ";
  $sql.="AND shop_id=? ";
  $stmt = $pdo->prepare($sql);
  $stmt->execute([$item,$shop]);
}elseif(!is_null($item)){
  $sql ="SELECT shop_id as value,shop_name as text FROM テーブルC ";
  $sql.="WHERE 1 ";
  $sql.="AND item_id=? ";
  $stmt= $pdo->prepare($sql);
  $stmt->execute([$item]);
}
if($stmt){
  $rows=$stmt->fetchAll(PDO::FETCH_ASSOC);
  print json_encode($rows);
}else{
  print json_encode((object)[]);
}
?>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/03 22: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"}]」が表示されますが、ドロップダウンリストには出てきません。これが何故かわかるとありがたいのですが。。。

    キャンセル

  • 2016/12/03 23:44

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

    キャンセル

  • 2016/12/05 09:23

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

    キャンセル

0

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

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

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

// ・・・略・・・ フロントのコーディングは本職じゃないので間違いがあるかも。間違ってたら適当に治してください。
            $(function () {
                // id="shop" が change イベントを発行したとき
                $('#shop').on('change', function () {
                    var params = {  // idとshopをパラメーターに設定
                        id:   $("#item option:selected").val(), 
                        shop: $(this).val()
                    };
                    $.getJSON('ajax2.php', params, function (json) {
// ・・・略・・・
// ・・・略・・・ SQL文が正しいかどうかは検証していません。
$sql_trading  = 'SELECT DISTINCT(t.hatukbn) ';
$sql_trading .= 'FROM VM_nouhin_jisseki t ';
$sql_trading .= 'WHERE dpt = :item_id ';
$sql_trading .= '  and ven = :shop_id ';
// ・・・略・・・
$arrParams = array(
    ':item_id' => filter_input(INPUT_GET, 'id'), 
    ':shop_id' => filter_input(INPUT_GET, 'shop') 
); 
// ・・・略・・・

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/11/28 19: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

    単純なエラーなので、タイプミスしていますでしょうか?

    キャンセル

  • 2016/11/28 21:06

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

    キャンセル

  • 2016/11/28 21:44

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

    キャンセル

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

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