- ベストアンサー
フォームのメニューリストを外部ファイルを読み込んで動的生成する方法
お世話になっております。 下記のような処理を実現したいのですが、どうも良い方法が 見つかりません。できるならばHTMLページにJavascriptを 埋め込む形で実現したいのですが、可能でしょうか。また 可能であればその方法もご教授頂けないでしょうか。 ・HTML内、フォームエレメントのメニューリストの項目を 外部ファイルを読み込んで動的に生成したい <select name="select"> <option value="１">リスト１</option> <option value="２">リスト２</option> <option value="３">リスト３</option> </select> 上記のvalueの値とリスト１、リスト２、リスト３の 部分を外部ファイルを読み込んで生成したいのです。 外部ファイルの内容は、CGIによって別途更新されます。 以上不足部分は補足致します。 どうぞよろしくお願いします。
- yaya999
- お礼率95% (23/24)
- JavaScript
- 回答数7
- ありがとう数11
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちは。 回答遅くなってすみません。 私がよくやる方法は以下の通りです。 さて、インクルードを使用できるのであれば、 (1) pulldown.inc（pulldownは任意）というファイルを作成 (2) HTML内部にインクルードさせたい箇所に <!--#include virtual="pulldown.inc" --> を挿入 ※パスに気をつけて下さい (3) pulldown.inc内に必要なタグのみ記述 例） <select name="select"> <option value="１">リスト１</option> <option value="２">リスト２</option> <option value="３">リスト３</option> </select> (4) .htaccesファイル内に以下の記述を追加（※必要であれば） Addtype text/x-server-parsed-html .html だけでＯＫなはずです。 もし、SSIを使用しないHTMLファイルも結構ある、という事でしたら、SSIを使用するファイル拡張子は『.shtml』として、上記(4)の記述を Addtype text/x-server-parsed-html .shtml としてください。 更新させたい時は、単にこの『pulldown.inc』を書き変えればＯＫなので、楽なのでは。。 ご参考になれば幸いです。
その他の回答 (6)
- ittochan
- ベストアンサー率64% (2667/4137)
これなら、 IE5以上、NN6以上で可能みたいですよ。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function window_onload() { var sa = document.getElementById("mydata").contentWindow.document.body.innerHTML; //HTMLタグを省く var re=/<(.*)>|<\/\1>/g; sa = sa.replace(re,""); var sb = sa.split("\n"); var txt = sb[0].split(","); var val = sb[1].split(","); var sl = "<SELECT size=1>"; for (i=0;i<txt.length;i++){ sl += "<OPTION value="+val[i]+">"+txt[i];} sl += "</SELECT>"; document.getElementById("myp").innerHTML=sl; } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <P>ドロップダウンリスト項目をファイルから取得</P> <P id="myp"></P> <P> <iframe id=mydata src="Book1.txt" width=0 height=0></iframe></P> </BODY> </HTML> Book1.txtはANo.#4と同じね。
お礼
インラインフレームを活用するやつですね。 ittochanさんにも、いろいろ情報をご提供頂き 感謝致します。本当にありがとうございました。 結論としては、SSIが使用可能なようなので、今回は SSIにて対処したいと思います。 ですが、今後SSIが不可な場合にはittochanさんを初めとする 皆様から頂いたテクニックを参考にさせて頂きたいと 思います。本当にありがとうございました。
こんにちは。 JavaScriptでの回答ではないので、見当違いかもしれませんが、インクルードファイル（SSI）の使用はできませんか（サーバによりますが）？ それが一番てっとり早く、また、ファイル内はHTMLタグだけで良いのですが・・・。
お礼
ご指摘、ごもっともです。 SSIが使用可かどうか、未確認ですので 早速調べてみたいと思います。 処理としては、外部ファイルを取り込んでリストを生成して、 表示、となると思うのですが、SSIの場合ですと、 （１）includeで外部ファイル取り込み （２）execでリスト生成 （３）execでリスト表示 といったような使い方で正しいでしょうか？ SSIは使用経験がなく、インターネットにて先程リファレンス を閲覧した程度のレベルです。大まかで結構ですので 掲題のケースでの使用法保をご教授頂けないでしょうか。 なんだかJavaScriptのカテゴリから外れてしまいますが、 ぜひ、よろしくお願いします。
- ittochan
- ベストアンサー率64% (2667/4137)
＞削除が頻繁に行われてしまいます。 でしたら、データファイルを リスト１,リスト２,リスト３ １,２,３ これをBook1.csv として、 htmファイルは <html XMLNS:MSIE> <head> <MSIE:Download ID="oDownload" STYLE="BEHAVIOR: url(#default#download)" > <SCRIPT LANGUAGE=javascript> <!-- var af = "Book1.csv"; function onDownloadDone(s){ var sa = s.split("\r"); var txt = sa[0].split(","); var val = sa[1].split(","); var i; var op = new Array(); for (i=0;i<txt.length;i++){ op[i] = document.createElement("OPTION"); op[i].text=txt[i]; op[i].value=val[i]; document.all.slct.add(op[i]); } } function window_onload() { oDownload.startDownload(af,onDownloadDone); } //--> </SCRIPT> </head> <body LANGUAGE=javascript onload="return window_onload()"> <P><SELECT id=slct> </SELECT></P> </MSIE:Download> </body> </html> こうしますと、ページが読み込まれると Book1.csv がダウンロードされて 変数 s に内容が入ります。 InternetExplorer5以上限定ですが、``r(・_・；)
お礼
ittochan様 お礼が遅れてしまい、申し訳ありませんでした。 コーディングまでして頂き恐縮です。 スタイルシートの外部スクリプト取り込みを利用するわけ ですね。いろんな方法があるのですね。勉強になりました。 参考にさせて頂きます。ありがとうございました。 IE５以上というのが残念っ！！
- FlossenEngel
- ベストアンサー率77% (132/170)
>外部ファイルの内容は、CGIによって別途更新されます。 このCGIを変更/追加できるのであればJavaScriptのコードを直接生成してやればよいと思います。 変更できないのであれば、IEの場合(やり方はいろいろあると思いますが)例えば、 <iframe name="data" width="0" height="0" src="datafile"></iframe> で外部ファイルを読み込んで、 top.data.document.body.innerText を外部ファイルのフォーマットに応じて改行コードや区切り文字などで分解してやればできそうな気がします。
お礼
なるほど、不可視のインラインフレームですか。 そういう方法もあるんですね。 IE限定というのが残念ですが、取り込んだdatafileにネスケやMacでも スクリプトではアクセスできる、なんてことはないですよね。(^^; 少し調べてみます。 ただ結局のところ、皆様がおっしゃっているように、CGIでデータファイルを、 jsファイルとして生成して、それを取り込む方法しかないのかな、 と考えております。 ご助言、本当にありがとうございました。
- ittochan
- ベストアンサー率64% (2667/4137)
<BODY> <P> <P><SELECT id=slct> </SELECT></P> </BODY> <script language="JavaScript" src="func.js"></script> と var i; var op = new Array(); var txt = new Array("リスト１","リスト２","リスト３"); var val = new Array("１","２","３"); for (i=0;i<txt.length;i++){ op[i] = document.createElement("OPTION"); op[i].text=txt[i]; op[i].value=val[i]; document.all.slct.add(op[i]); } こんなのはどうでしょう。
お礼
ittochanさん、ご回答ありがとうございます。 後者のスクリプト部分を生成するということですね。 今更の補足なのですが、「リスト１」、「リスト２」、「リスト３」 の部分と「value=１」、「value=２」、「value=３」の部分は 追加、削除が頻繁に行われてしまいます。なので、動的生成を行う 外部ファイルはできるだけシンプルな形式にしたいと思っているのです。 （(^^;冗長な作り方の割に我侭ですみません。） でも参考にさせて頂きます。有難うございました。
- osamuy
- ベストアンサー率42% (1231/2878)
例えば、 with ( document ){ writeln( '<option value="1">List1</option>' ); writeln( '<option value="2">List2</option>' ); writeln( '<option value="3">List3</option>' ); } ――とかいた、ファイルa.jsを、以下の方法で読み込むようにするとか。 <html><head> <title>Test</title> </head><body> <select name="CBox1"> <script type="text/javascript" src="a.js"></script> </select> </body></html> でも素直に、サーバー側で処理する方が、簡単なような気が。
お礼
なるほど、そういう風にjsファイルをリストメニューの要素として 取り込むこともできるんですね。勉強になりました。 そのページ全体をPerlやPHPなどで生成できれば簡単なのですが、 そのセレクトメニューがサイト全体のHTMLページに設置されるものなので、 （クイックリンクメニューとして使用される） どうしてもHTML埋め込みである必要があったのです。 osamuyさんの手法を少し研究してみたいと思います。 どうもありがとうございます。
お礼
お礼が遅れてしまい申し訳ありませんでした。 サーバはSSI使用可のようなので、早速活用したいと思います。 ご親切な解説、誠にありがとうございました。