質問: javascript、プルダウン絞り込み・ソート javascriptかなり初心者です。 急に必要となり、本やwebを参考に今月始めたばかりで、少しずつ理解はしているつもりですが、 正直、ソースを公開しているサイトをほぼコピペして、 webページ(.php)、タブ区切りデータ(.txt)、javascript(.jp)の 3つのデータで1つのwebページを作っている状態です。 ※webページ(.php)はこちらを参考にしましたhttp://phpjp.com/sample/g16ddyffg0qdk4n9i+aq2ilog3sdqindg4ucqylnlvyc8i3skkw.htm そこで、下記のような複雑な表を作りたいと考えています。 1.)ページを開いたときに表示される表 ※▲▼は昇順・降順ソートとします ※□はあらかじめ絞り込みの単語を入れた、プルダウンメニューとします no ┃商品名┃社名┃住所 ▲▼┃□ ┃□ ┃□1:□2 ──────────── 01┃ちくわ┃○社┃東京都港区 02┃とうふ┃△社┃東京都新宿区 03┃がんも┃○社┃北海道札幌市 04┃たたき┃□社┃高知県高知市 05┃ゴーヤ┃□社┃沖縄県那覇市 06┃マウス┃△社┃海外 2.)社名のメニューで「□社」を選択した場合 no ┃商品名┃社名┃住所 ▲▼┃□ ┃□ ┃□1:□2 ──────────── 04┃たたき┃□社┃高知県高知市 05┃ゴーヤ┃□社┃沖縄県那覇市 3.)更に、商品名のメニューで「魚介」を選択した場合 no ┃商品名┃社名┃住所 ▲▼┃□ ┃□ ┃□1:□2 ──────────── 04┃たたき┃□社┃高知県高知市 ★こちらを作るにあたって、 http://vird2002.s8.xrea.com/javascript/tableeditor.html を参考にしましたが、各見出しにメニューを設置した場合、 上記3.)の更に絞り込むことができませんでした。 もう1点、上記1.)に戻り、住所で絞り込みたい場合、 1.)ページを開いたときに表示される表 no ┃商品名┃社名┃住所 ▲▼┃□ ┃□ ┃□1:□2 ──────────── 01┃ちくわ┃○社┃東京都港区 02┃とうふ┃△社┃東京都新宿区 03┃がんも┃○社┃北海道札幌市 04┃たたき┃□社┃高知県高知市 05┃ゴーヤ┃□社┃沖縄県那覇市 06┃マウス┃△社┃海外 2.)住所下の住所メニュー「□1」を都道府県「東京都」で絞り込む no ┃商品名┃社名┃住所 ▲▼┃□ ┃□ ┃□1:□2 ──────────── 01┃ちくわ┃○社┃東京都港区 02┃とうふ┃△社┃東京都新宿区 3.)住所下の住所メニュー「□2」を市町村「港区」で絞り込む no ┃商品名┃社名┃住所 ▲▼┃□ ┃□ ┃□1:□2 ──────────── 01┃ちくわ┃○社┃東京都港区 ※「□2」は「□1」の都道府県に基づく市町村がメニューとして表示される どうか、ご回答宜しくお願い致します。 こういったテーブルは可能・不可能だけでもわかればと思っています。 何度も書いて申し訳ありませんが、初心者で勉強を始めたばかりですので、 こういったjavascriptを1から作る際に便利な入門ページもあればお教えいただければ幸いです。
回答: 作り始める前に、仕様をもうちょっと見つめ直してみましょう。 まず、 1.初期状態では、表と、各プルダウンの中身はどおしておくのか? 2.商品名のメニューで「魚介」を選んだ場合の商品の検索ロジックは? ※プログラムで「魚介」から「たたき」を連想して抽出するのは超困難です。 牛たたきもあるでしょうし、抽出用の商品分類コードを付加するとか、 サーバー側で別途商品テーブルを準備するとか... 3.住所下の住所メニュー「□1」を都道府県「東京都」で絞り込んで、さらに 「港区」で絞り込むロジックは? ※これも出来なくはないですが、面倒です。素直にコード化すれば、まず 東京都を含む住所のデータを抽出した上で、プルダウンに東京都配下の 住所をセットしなおし、選ばせて抽出し直す事になりますが、どの住所 レベルまで繰り返すのかとか、都・道・府・県・郡・市・町・まちや 地名表記の独自性や同名の地名を考慮すると超困難になります。 ※とりあえず、地名にふくまれるキーワードの一回検索でお茶を濁すとか.. 4.no.での▲▼は昇順・降順ソートは意味ありますか? ※もし、データが最初からno.の順番で並んでいるなら、抽出してもその並び順 のはずですから、あまり意味が無いような... (no.の順に関係なくデータが格納されているなら意味ありますけど、むしろ 商品名順とか、会社順、住所順、で並べ替え機能を持たせたほうが実用性が あると思います。 次に実装方法ですが、javascript使用可能を前提としているなら、ajax(xmlhttprequest) を使います。表は 要素、プルダウンは、要素でもよいでしょう。 各要素のonchangeのイベントで持って、選択されたキーワードをxmlhttprequestで、サーバー側phpに送ります、サーバー側はキーワードから次のキーワードリストを検索して要素と|を返します、これを受け取って次のとを書き換えるようにします。この辺の処理にはjavascriptのdom関数を使います。 テーブルのソートもjavascriptのdom操作で可能です。 サーバー側の検索処理は、データをどのような型式で持っているかによります。 csvを配列に読み込んでおくとか、json型式で持つとか、xml型式で持つとか、 検索を考えるとdbを使うのが手っ取り早いですが、数100件ぐらいならxml型式 で準備して、dom関数やxpath関数で検索するのが便利です。 ※全部、フルスクラッチでコーディングするのがきつければ、出来合いの ライブラリーを探すとか、jqueryのようなjavascriptのフレームワーク ライブラリーを使うのも検討して見た方が楽に作れるでしょう。 ※こつこつ作って見て、解らなかったら部分があったら、また、個別に質問を投 げて見ましょう。丸投げの場合は、もうちょっと仕様を固めて、付けたしの お願いが発生しないようにしましょう。