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

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

ただいまの
回答率

88.09%

プルダウン連動検索機能(FormHelper)(hierselect)

受付中

回答 0

投稿 編集

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

score 12

実現したいこと

PHP(CakePHP)で連動プルダウン+セレクトボックス間テキスト移動を使用したグラフ表示システムを作っています。
検索後に値を保持した状態にしたいです。
※現在は検索後、検索キーが初期化される。

わかりにくい説明文ですが、サンプルソースや参照サイトなどアドバイス等を宜しくお願い致します。
もし、検索キーの保持のやり方が別にあり、そちらで実現できればそちらでもOKです。

※初心者のため、どのようにソースを抜粋すれば良いかわからなかったため、長くなってしまいました。
※グラフ作成部分は未記入

--- サンプル -----------------------------------------------------------------------------
◎ソースとは関係ないのですが、やりたいことの例を日本語で記述しておきます。
1.市区町村を1つ選択。新宿区、渋谷区、立川市、国立市 など 例)渋谷区
2.観光スポットを複数選択。 水族館、動物園、遊園地、神社、レストラン など 例)神社、レストラン
3.該当する名所を複数選択。 花園神社、1・2・3・ファクトリー、オセロ など
4.3で選択したキーを元に検索。
5.検索結果の詳細情報以外に、1,2,3で選択した条件を保持したままにしたい。

※画面の左側に検索条件、右側に詳細情報を表示し、別ページには移動しない。

◎index.ctp

<!-- プロダクト -->
<li>
    <?= __('プロダクト') ?><br>
    <?=$this->Form->select('LoadchartForm.SelectProductNM', $products, ['disabled'=>false, 'multiple' => false, 'id' => 'selectProductID', 'size' => 3, 'empty' => false]); ?>
</li>

<!-- サブシステム -->
<li>
    <?= __('サブシステム') ?><br>
    <?=$this->Form->select('LoadchartForm.SelectSubsystemNM', $subsystems, ['disabled'=>true, 'multiple'=>true, 'id'=>'selectSubsystemID', 'size'=>10, 'empty'=>false]); ?>
</li>

<!-- 検索結果表示 -->
<!-- リストボックス間移動1 -->
<li>
    <?=$this->Form->select('LoadchartForm.SelectHandleSubsystemsAccountNM', $handleSubsystemAccounts, ['disabled'=>true, 'multiple'=>true, 'id'=>'selectHandleSubsystemAccountID', 'size'=>10, 'empty'=>false]); ?>
</li>
<li>
    <center>
        <input type="button" id="move_down" value="↓" />
        <!-- スペース (位置合わせ)-->

        <input type="button" id="move_up" value="↑" />
    </center>
</li>
<li>
    <?=$this->Form->select('LoadchartForm.SelectAccountNM', null, ['disabled'=>false, 'multiple' => true, 'id' => 'selectAccountID', 'size' => 10, 'empty' => false]); ?>
</li>

<script type="text/javascript">
$(document).ready(function(){

    // プルダウンのoption内容をコピー
    var pd1 = $("#selectProductID option").clone();
    var pd2 = $("#selectSubsystemID option").clone();
    var pd3 = $("#selectHandleSubsystemAccountID option").clone();

    var pd4 = null; // 検索結果(検索用)
    var pd5 = null; // 検索結果(検索用)

    // 1→2連動
    $("#selectProductID").change(function () {
        // lv1のvalue取得
        var lv1Val = $("#selectProductID").val();

        // selectSubsystemIDのdisabled解除
        $("#selectSubsystemID").removeAttr("disabled");

        // 一旦、selectSubsystemIDのoptionを削除
        $("#selectSubsystemID option").remove();

        // (コピーしていた)元のselectSubsystemIDを表示
        $(pd2).appendTo("#selectSubsystemID");

        // 選択値以外のクラスのoptionを削除
        $("#selectSubsystemID option[class != p"+lv1Val+"]").remove();

        // selectHandleSubsystemAccountID disabled処理
        $("#selectHandleSubsystemAccountID").attr("disabled", "disabled");
    });

    // 2→3連動
    $("#selectSubsystemID").change(function () {

        // selectHandleSubsystemAccountIDのdisabled解除
        $("#selectHandleSubsystemAccountID").removeAttr("disabled");

        // 一旦、selectHandleSubsystemAccountIDのoptionを削除
        $("#selectHandleSubsystemAccountID option").remove();
        $("#selectAccountID option").remove();

        // マルチ選択
        var e = document.getElementById('selectSubsystemID');
        var any = new Array();
        var num = 0;

        // optionを順番に見て、selected となっているものの添え字を配列に入れる
        for (var i=0; i<e.childElementCount; i++) {
            if (e.getElementsByTagName('option')[i].selected) {
                any[num] = i;
                num++;
            }
        }

        // for..in文でまわして、配列にいれた添え字と、添え字をもとに文字列を出力させる
        var flg = false;
        for(var txt in any) {

            // ID取得
            var strId = e.children[any[txt]].value;

            // (コピーしていた)元のselectHandleSubsystemAccountIDを表示
            $(pd3).appendTo("#selectHandleSubsystemAccountID");

            // 選択値以外のクラスのoptionを削除
            $("#selectHandleSubsystemAccountID option[class != p" + strId + "]").remove();
            if (flg == false) {
                var totalPd3 = $("#selectHandleSubsystemAccountID option").clone();
                flg = true;
            }else{
                var copyPd3 = $("#selectHandleSubsystemAccountID option").clone();
                totalPd3 = $(totalPd3).add(copyPd3);
            }
        }
        $("#selectHandleSubsystemAccountID option").remove();
        $(totalPd3).appendTo("#selectHandleSubsystemAccountID");

        $(pd5).appendTo("#selectAccountID");
    });

    // ↓ボタン押下処理
    $("#move_down").click(function () {
        $('#selectAccountID').append($('#selectHandleSubsystemAccountID option:selected'));
        $('#selectHandleSubsystemAccountID').prop("selected", false);
        pd4 = $("#selectHandleSubsystemAccountID option").clone();
        pd5 = $("#selectAccountID option").clone();
    });

    // ↑ボタン押下処理
    $("#move_up").click(function () {
        $('#selectHandleSubsystemAccountID').append($('#selectAccountID option:selected'));
        $('#selectAccountID').prop("selected", false);
        pd4 = $("#selectHandleSubsystemAccountID option").clone();
        pd5 = $("#selectAccountID option").clone();
    });

    // 検索ボタン押下処理
    $("#workTermID").click(function () {
        // 全選択
        $("#selectAccountID option").prop("selected", true);
    });

});
</script>

◎Controller.php

    public function index()
    {
    // プロダクト(Products)
        $this->loadModel('Products');
        $products = $this->Products->find('list');
        $this->set('products', $products);

    // サブシステム(Subsystems)
    // DB接続例:mysqli_xxx関数を使う
        $conSubsystems = mysqli_connect('localhost', 'root', '', 'sdsm');

    // mysqli使用
        $querySubsystems = "SELECT subsystems.id AS subsystems_id, "
                                . "subsystems.product_id AS subsystems_productId, "
                                . "subsystems.name AS subsystems_name "
                         . "FROM subsystems "
                         . "ORDER BY subsystems_id ASC ";

        $execSubsystems = mysqli_query($conSubsystems, $querySubsystems);

    // オプション部分作成
        $listRawSubsystems = array();

        while($listSubsystems2 = mysqli_fetch_array($execSubsystems)) {
                array_push($listRawSubsystems, ['value' => $listSubsystems2['subsystems_id'], 'class' => 'p' . $listSubsystems2['subsystems_productId'], 'text' => $listSubsystems2['subsystems_name']]);
        }

        $this->set("subsystems", $listRawSubsystems);

    // 検索結果(HandleSubsystems)
    // DB接続例:mysqli_xxx関数を使う
        $conHandleSubsystems = mysqli_connect('localhost', 'root', '', 'sdsm');

        $queryHandleSubsystems = "SELECT handle_subsystems.id AS handle_subsystems_id, "
                                      . "handle_subsystems.subsystem_id AS handle_subsystems_subsystemId, "
                                      . "handle_subsystems.account_id AS handle_subsystems_accountId, "
                                      . "accounts.name AS accounts_name "
                               . "FROM handle_subsystems "
                               . "LEFT JOIN accounts "
                               . "ON handle_subsystems.account_id = accounts.id "
                               . "ORDER BY handle_subsystems_id ASC ";

        $execHandleSubsystems = mysqli_query($conHandleSubsystems, $queryHandleSubsystems);

    // オプション部分作成
        $listRawHandleSubsystems = array();

        while($listHandleSubsystems2 = mysqli_fetch_array($execHandleSubsystems)) {
                array_push($listRawHandleSubsystems, ['value' => $listHandleSubsystems2['handle_subsystems_accountId'], 'class' => 'p' . $listHandleSubsystems2['handle_subsystems_subsystemId'], 'text' => $listHandleSubsystems2['accounts_name']]);
        }

        $this->set("handleSubsystemAccounts", $listRawHandleSubsystems);


// 検索ボタン押下処理
if ($this->request->isPost()) {

    // セレクトボックス(マルチ)から値取得
    // 人
    $selectAccountNM = array();
    $selectAccountID = array();
    $hogehoge ="";

    foreach($this->request->data('LoadchartForm.SelectAccountNM') as $keyAcc => $valAcc) {
        $v_strAcc = '';
        foreach((array)$valAcc as $vAcc) {
            $v_strAcc .= $vAcc . ' ';
        }
        $hogehoge .= $keyAcc . ' => ' . $v_strAcc;
        $hogehoge = "";
        array_push($selectAccountNM, "working_details.account_id = " . $v_strAcc);
        array_push($selectAccountID, "accounts.id = " . $v_strAcc);
    }

    $dataAccountLists = "";
    $dataAccountIdLists = "";
    $cntDataAccounts = count($selectAccountNM);

    for ($i=1; $i<$cntDataAccounts; $i++) {
        $dataAccountLists .= $selectAccountNM[$i-1] . " OR ";
        $dataAccountIdLists .= $selectAccountID[$i-1] . " OR ";
    }

    $dataAccountLists .= $selectAccountNM[$cntDataAccounts-1];
    $dataAccountIdLists .= $selectAccountID[$cntDataAccounts-1];
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • m.ts10806

    2017/08/29 10:54

    調べた内容ややってみた内容をもう少し詳しく追記お願いします。また、プログラムコード(およびエラーメッセージ)は```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)

    キャンセル

  • noranuko

    2017/10/03 18:13

    自分の書き方がわかりにくいので、他者さんで同じ質問をされている方がいましたので、そちらのリンクを張っておきます。

    キャンセル

  • キャンセル

  • noranuko

    2017/10/03 18:18

    自分の場合は絞り込んだ項目をキーにして検索します。検索後、選択が全解除されてしまい、選んだ項目も未選択状態になります。

    キャンセル

まだ回答がついていません

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

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

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