JavaScriptでプルダウン絞り込み・ソートする方法とは？

2010/12/06 18:33

このQ&Aのポイント

JavaScriptを使用して、プルダウンメニューで絞り込みやソート機能を実装する方法について説明します。
あらかじめ絞り込み単語が入力されたプルダウンメニューと、昇順・降順ソート機能を持つ表を表示することが目標です。
また、複数の絞り込みやソートが可能であり、ユーザーが選択した条件に基づいて表の表示内容を変更することができます。

JavaScript、プルダウン絞り込み・ソート

JavaScriptかなり初心者です。急に必要となり、本やwebを参考に今月始めたばかりで、少しずつ理解はしているつもりですが、正直、ソースを公開しているサイトをほぼコピペして、 webページ（.php）、タブ区切りデータ（.txt）、JavaScript（.jp）の 3つのデータで1つのwebページを作っている状態です。 ※webページ(.php)はこちらを参考にしましたhttp://phpjp.com/sample/g16DdYFFg0qDk4N9i+aQ2ILog3SDQINDg4uCqYLnlVyC8I3skKw.htm そこで、下記のような複雑な表を作りたいと考えています。１．）ページを開いたときに表示される表 ※▲▼は昇順・降順ソートとします ※□はあらかじめ絞り込みの単語を入れた、プルダウンメニューとします No　┃商品名┃社名┃住所 ▲▼┃□　　　┃□　┃□1：□2 ──────────── 01┃ちくわ┃○社┃東京都港区 02┃とうふ┃△社┃東京都新宿区 03┃がんも┃○社┃北海道札幌市 04┃たたき┃□社┃高知県高知市 05┃ゴーヤ┃□社┃沖縄県那覇市 06┃マウス┃△社┃海外２．）社名のメニューで「□社」を選択した場合 No　┃商品名┃社名┃住所 ▲▼┃□　　　┃□　┃□1：□2 ──────────── 04┃たたき┃□社┃高知県高知市 05┃ゴーヤ┃□社┃沖縄県那覇市３．）更に、商品名のメニューで「魚介」を選択した場合 No　┃商品名┃社名┃住所 ▲▼┃□　　　┃□　┃□1：□2 ──────────── 04┃たたき┃□社┃高知県高知市 ★こちらを作るにあたって、 http://vird2002.s8.xrea.com/javascript/tableEditor.html を参考にしましたが、各見出しにメニューを設置した場合、上記３．）の更に絞り込むことができませんでした。もう1点、上記１．）に戻り、住所で絞り込みたい場合、１．）ページを開いたときに表示される表 No　┃商品名┃社名┃住所 ▲▼┃□　　　┃□　┃□1：□2 ──────────── 01┃ちくわ┃○社┃東京都港区 02┃とうふ┃△社┃東京都新宿区 03┃がんも┃○社┃北海道札幌市 04┃たたき┃□社┃高知県高知市 05┃ゴーヤ┃□社┃沖縄県那覇市 06┃マウス┃△社┃海外２．）住所下の住所メニュー「□1」を都道府県「東京都」で絞り込む No　┃商品名┃社名┃住所 ▲▼┃□　　　┃□　┃□1：□2 ──────────── 01┃ちくわ┃○社┃東京都港区 02┃とうふ┃△社┃東京都新宿区３．）住所下の住所メニュー「□2」を市町村「港区」で絞り込む No　┃商品名┃社名┃住所 ▲▼┃□　　　┃□　┃□1：□2 ──────────── 01┃ちくわ┃○社┃東京都港区 ※「□2」は「□1」の都道府県に基づく市町村がメニューとして表示されるどうか、ご回答宜しくお願い致します。こういったテーブルは可能・不可能だけでもわかればと思っています。何度も書いて申し訳ありませんが、初心者で勉強を始めたばかりですので、こういったJavaScriptを1から作る際に便利な入門ページもあればお教えいただければ幸いです。

rabbit-kimura
お礼率91% (102/112)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/12/07 10:13 回答No.1

作り始める前に、仕様をもうちょっと見つめ直してみましょう。まず、 1.初期状態では、表と、各プルダウンの中身はどおしておくのか？ 2.商品名のメニューで「魚介」を選んだ場合の商品の検索ロジックは？　※プログラムで「魚介」から「たたき」を連想して抽出するのは超困難です。　　牛たたきもあるでしょうし、抽出用の商品分類コードを付加するとか、　　サーバー側で別途商品テーブルを準備するとか．．． 3.住所下の住所メニュー「□1」を都道府県「東京都」で絞り込んで、さらに　「港区」で絞り込むロジックは？　※これも出来なくはないですが、面倒です。素直にコード化すれば、まず　　東京都を含む住所のデータを抽出した上で、プルダウンに東京都配下の　　住所をセットしなおし、選ばせて抽出し直す事になりますが、どの住所　　レベルまで繰り返すのかとか、都・道・府・県・郡・市・町・まちや　　地名表記の独自性や同名の地名を考慮すると超困難になります。　※とりあえず、地名にふくまれるキーワードの一回検索でお茶を濁すとか．． 4.No.での▲▼は昇順・降順ソートは意味ありますか？　※もし、データが最初からNo.の順番で並んでいるなら、抽出してもその並び順　のはずですから、あまり意味が無いような．．．（No.の順に関係なくデータが格納されているなら意味ありますけど、むしろ　商品名順とか、会社順、住所順、で並べ替え機能を持たせたほうが実用性が　あると思います。　次に実装方法ですが、javascript使用可能を前提としているなら、Ajax(XmlHttpRequest) を使います。表は<table>要素、プルダウンは、<select>要素でもよいでしょう。各<select>要素のonchangeのイベントで持って、選択されたキーワードをXmlHttpRequestで、サーバー側PHPに送ります、サーバー側はキーワードから次のキーワードリストを検索して<option>要素と<tr>を返します、これを受け取って次の<select>と<tbody>を書き換えるようにします。この辺の処理にはjavascriptのDOM関数を使います。　テーブルのソートもjavascriptのDOM操作で可能です。サーバー側の検索処理は、データをどのような型式で持っているかによります。 csvを配列に読み込んでおくとか、JSON型式で持つとか、XML型式で持つとか、検索を考えるとDBを使うのが手っ取り早いですが、数100件ぐらいならXML型式で準備して、DOM関数やXPath関数で検索するのが便利です。 ※全部、フルスクラッチでコーディングするのがきつければ、出来合いのライブラリーを探すとか、jQueryのようなjavascriptのフレームワークライブラリーを使うのも検討して見た方が楽に作れるでしょう。 ※こつこつ作って見て、解らなかったら部分があったら、また、個別に質問を投　げて見ましょう。丸投げの場合は、もうちょっと仕様を固めて、付けたしの　お願いが発生しないようにしましょう。　　

質問者

お礼 2010/12/07 14:47

お早いご回答誠にありがとうございます。ご丁寧にアドバイスいただき、大変感謝致します。補足いただきました内容としましては、１．２．４．につきまして No　┃商品名┃社名┃住所 ▲▼┃□　　　┃□　┃□1：□2 ──────────── 01┃ちくわ┃○社┃東京都港区 02┃とうふ┃△社┃東京都新宿区 03┃がんも┃○社┃北海道札幌市 04┃たたき┃□社┃高知県高知市 05┃ゴーヤ┃□社┃沖縄県那覇市 06┃マウス┃△社┃海外 ※例として上げた表の為、これ以上の商品数・社数はないものと仮定させていただきます。 ※見出しについて、 Noは必ずしも順番とは限りません ※商品名メニュー商品名と一致しない単語での絞り込みを行う予定の為、仮に「魚介」とした場合「たたき」を絞り込ませる例としてあげさせていただきました。また、個人的に「牛のたたき」というなじみがないので「たたき=かつお」という概念になっておりました、誠に申し訳ございません。 ※社名メニュー ○社、△社、□社　をメニューとして表示させておきます３．やはり、困難なのですね。それが分かっただけでも大変嬉しいです。 >>サーバー側の検索処理は、データをどのような型式で持っているかによります。 csvを配列に... サーバはWebに公開するだけなので、レンタルサーバに現段階でデータはタブ区切りのテキストファイルにデータを置いています。元のデータはエクセルで作っています。 .js、.phpは、テキストエディタで一から手打ちを行っています。正直、今回の表が急に必要となり、知人に聞いたところ「javascriptじゃない？」（知人はjavaは知っているがjavascriptは知らないようで）くらいの助言をいただいただけで、本当手探りの状態でした。最後の手段として質問させていただきましたが、本当に丁寧に回答いただき感謝しています。コツコツですが、理解しながら頑張ってみたいと思います!!