###実現したいこと
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]; }
あなたの回答
tips
プレビュー