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

JavaScriptかなり初心者です。
急に必要となり、本やwebを参考に今月始めたばかりで、少しずつ理解はしているつもりですが、
正直、ソースを公開しているサイトをほぼコピペして、
webページ（.php）、タブ区切りデータ（.txt）、JavaScript（.jp）の
3つのデータで1つのwebページを作っている状態です。
※webページ(.php)はこちらを参考にしましたhttp://phpjp.com/sample/g16DdYFFg0qDk4N9i+aQ2ILo …


そこで、下記のような複雑な表を作りたいと考えています。


１．）ページを開いたときに表示される表
※▲▼は昇順・降順ソートとします
※□はあらかじめ絞り込みの単語を入れた、プルダウンメニューとします

No　┃商品名┃社名┃住所
▲▼┃□　　　┃□　┃□1：□2
────────────
01┃ちくわ┃○社┃東京都港区
02┃とうふ┃△社┃東京都新宿区
03┃がんも┃○社┃北海道札幌市
04┃たたき┃□社┃高知県高知市
05┃ゴーヤ┃□社┃沖縄県那覇市
06┃マウス┃△社┃海外


２．）社名のメニューで「□社」を選択した場合

No　┃商品名┃社名┃住所
▲▼┃□　　　┃□　┃□1：□2
────────────
04┃たたき┃□社┃高知県高知市
05┃ゴーヤ┃□社┃沖縄県那覇市


３．）更に、商品名のメニューで「魚介」を選択した場合

No　┃商品名┃社名┃住所
▲▼┃□　　　┃□　┃□1：□2
────────────
04┃たたき┃□社┃高知県高知市


★こちらを作るにあたって、
http://vird2002.s8.xrea.com/javascript/tableEdit …
を参考にしましたが、各見出しにメニューを設置した場合、
上記３．）の更に絞り込むことができませんでした。



もう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から作る際に便利な入門ページもあればお教えいただければ幸いです。

No.1 ベストアンサー 回答者： yyr446 回答日時： 2010/12/07 10:13

作り始める前に、仕様をもうちょっと見つめ直してみましょう。

まず、
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のフレームワーク
ライブラリーを使うのも検討して見た方が楽に作れるでしょう。

※こつこつ作って見て、解らなかったら部分があったら、また、個別に質問を投
　げて見ましょう。丸投げの場合は、もうちょっと仕様を固めて、付けたしの
　お願いが発生しないようにしましょう。



　　

この回答へのお礼

お早いご回答誠にありがとうございます。
ご丁寧にアドバイスいただき、大変感謝致します。

補足いただきました内容としましては、

１．２．４．につきまして

No　┃商品名┃社名┃住所
▲▼┃□　　　┃□　┃□1：□2
────────────
01┃ちくわ┃○社┃東京都港区
02┃とうふ┃△社┃東京都新宿区
03┃がんも┃○社┃北海道札幌市
04┃たたき┃□社┃高知県高知市
05┃ゴーヤ┃□社┃沖縄県那覇市
06┃マウス┃△社┃海外

※例として上げた表の為、これ以上の商品数・社数はないものと仮定させていただきます。

※見出しについて、
Noは必ずしも順番とは限りません

※商品名メニュー
商品名と一致しない単語での絞り込みを行う予定の為、仮に「魚介」とした場合「たたき」を絞り込ませる例としてあげさせていただきました。
また、個人的に「牛のたたき」というなじみがないので「たたき=かつお」という概念になっておりました、誠に申し訳ございません。

※社名メニュー
○社、△社、□社　をメニューとして表示させておきます


３．やはり、困難なのですね。
それが分かっただけでも大変嬉しいです。




>>サーバー側の検索処理は、データをどのような型式で持っているかによります。
csvを配列に...

サーバはWebに公開するだけなので、レンタルサーバに現段階でデータはタブ区切りのテキストファイルにデータを置いています。
元のデータはエクセルで作っています。
.js、.phpは、テキストエディタで一から手打ちを行っています。


正直、今回の表が急に必要となり、知人に聞いたところ
「javascriptじゃない？」（知人はjavaは知っているがjavascriptは知らないようで）
くらいの助言をいただいただけで、本当手探りの状態でした。

最後の手段として質問させていただきましたが、本当に丁寧に回答いただき感謝しています。
コツコツですが、理解しながら頑張ってみたいと思います!!

お礼日時：2010/12/07 14:47