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

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

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

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

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

3542閲覧

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

noranuko

総合スコア12

PHP

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

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/08/28 11:55

編集2022/01/12 10:55

###実現したいこと
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]; }

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

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

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

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

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

m.ts10806

2017/08/29 01:54

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

2017/10/03 09:13

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

2017/10/03 09:18

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問