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件には一応目を通していますが、本件に適応が可能か否か、判断を付けかねています)

回答No.1

noname#25358

セレクトボックスの値の数は動的に変えられます。

　　<form name="form1">
　　<select name="select1">

　のとき、

　　document.form1.select1.length

　ここに値の数が入ってますので、これを変えると実際の値の数が変化します。
　たとえばここに３を代入すると、

　　document.form1.select1.options[n].text
　　document.form1.select1.options[n].value

　カッコ内のｎの値がそれぞれ０～２まで使用可能になります。

お礼

コメントありがとうございました。
お礼が大変遅くなり、申し訳ありません。
実際の案件はすでに終了しております。
画面を若干単純化することで妥協しました。

私がやりたかったのは、Select.Length の単純な変更ではなく、Selectのアイテム自体の動的な変更です。
ご指摘の方法だけでは実現が難しいように思いますが......。

補足

コメントありがとうございます。
取り急ぎ、お礼申し上げます。

結果報告は後日とさせてください。
(時間の関係で、妥協することになりそうですが......)