<SELECT>の<option value="#">で#にリンクされるような形でcsv2tableをつかってcsvテーブルを出したい
説明がうまくできないのですが
通常、option valueの値を下記のように
<select id="pref" name="pref" class="selectable">
<optgroup label="海の魚">
<option value="001.html">真鯛</option>
<option value="002.html">ガシラ</option>
</optgroup>
<optgroup label="川の魚">
<option value="003.html">鮎</option>
<option value="004.html">鯉</option>
</optgroup>
</select>
となっている場合、真鯛を選択すると001.htmlにジャンプしますよね。
こういうのの応用で、↓ここのように
http://allabout.co.jp/internet/javascript/closeup/CU20080229A/index2.htm
csvから表を呼び出して表示するようにしたいのですが、具体的にどのようにすればよいでしょうか?
上記サイトでは
<input>タグで呼び出すようにしていますので、物理的に不可能な場合は最終<input>タグでもいいかなと思っているのですが、情報が多いためできればインターフェースをすっきりさせたい面もあって<select>メニューから選択し、それが反映されるようにしたいのですが、どのようにすればよいでしょうか?
当方、htmlとcssの知識は多少ありますが、jsやajaxの知識はあまりありませんので、できるだけ詳しく教えていただけるとありがたいです。
ajaxを使用する場合、ライブラリはJquery1.3を使用していますので
かち合わないようにお願いします。
イメージ的には、下記のようなものが作りたいです。
このままだと動かないですけど・・・イメージとして・・・
<select id="pref" name="pref" class="selectable">
<optgroup label="海の魚">
<option value="
$('#fish').csv2table('001.csv',{
select : [0,1,2]
});"
>真鯛</option>
<option value="
$('#fish').csv2table('001.csv',{
select : [0,3,4]
});"
">ガシラ</option>
</optgroup>
<optgroup label="川の魚">
<optgroup label="海の魚">
<option value="
$('#fish').csv2table('002.csv',{
select : [0,1,2]
});"
>鮎</option>
<option value="
$('#fish').csv2table('002.csv',{
select : [0,3,4]
});"
">鯉</option>
</optgroup>
</select>
<div id="fish"></div>
イメージとしては、プルダウンで真鯛を選択すると、<div id="fish">●●</div>ここに、001.csvの0列・1列・2列目が吐き出され、またプルダウンから鯉を選択すると、002.csvの0列・3列・4列目が吐き出しなおされるというようなイメージです。