HTML + JavaScript 外部CSVファイルを使用した<SELECT>タグの動的な生成
下記のようなCSVを使用して、HTML上の<SELECT> の内容を動的に生成したいのです。
開催日,開催時刻,定員,予約済
2004/7/1,10:00,1,1
2004/7/1,11:00,1,0
2004/7/1,13:30,1,0
2004/7/1,14:30,1,0
2004/7/2,10:00,1,0
2004/7/2,11:00,1,0
2004/7/2,13:30,1,0
2004/7/2,14:30,1,0
2004/7/3,10:00,1,0
2004/7/3,11:00,1,0
2004/7/3,13:30,1,0
2004/7/3,14:30,1,0
具体的には、
(1)
日付のみが表示される<SELECT>を動的に生成。
(重複する日付は表示しない。つまり、上記の例では、2004/7/1、2004/7/ の件のみ)
(2)
上記(1)の<SELECT>のonchangeイベントで、別の<SELECT>に選択された日付の空き状況を表示する。
([定員] - [予約済み] = 0 なら表示しない。上記の例では、(1)の<SELECT>で2004/7/1を選択したとき、
(2)の<SELECT>には11:00、13:30、14:30 の3件が表示される)
(3)
上記(1)の<SELECT>のonchangeイベントで、3番目の<SELECT>に1番目の<SELECT>で選択した日付の翌日
以降を表示する。(1番目の<SELECT>で2004/7/1 を選択した場合、2004/7/2、2004/7/3 の2件が表示される)
(4)
上記(3)の<SELECT>のonchangeイベントで、4番目の<SELECT>に選択された日付の空き状況を表示する。
(以下、(2)と同様)
利用可能なのは、PHPとJavaScriptのみです。
((1)のみPHPにて実装済み)
HTML、JavaScriptでの実現は難しい気がしますが、アドバイスをお待ちしております。
(q=342549、525124 の2件には一応目を通していますが、本件に適応が可能か否か、判断を付けかねています)
お礼
steel_grayさんいろいろとありがとうございました。 イベントハンドラの記述場所は,もとのファイルの中でも良かったのですね。私の持っている解説書には,外部ファイルの中に記述する例しかなかったものですから,必ずこうしなければならないものと思っておりました。大変お世話様でした。ありがとうございました。また,何かありましたら,よろしくお願いします。