電子書籍の厳選無料作品が豊富！

フォームのメニューリストを外部ファイルを読み込んで動的生成する方法

解決済

  • 質問者：yaya999
  • 質問日時：
  • 回答数：7件

お世話になっております。
下記のような処理を実現したいのですが、どうも良い方法が
見つかりません。できるならばHTMLページにJavascriptを
埋め込む形で実現したいのですが、可能でしょうか。また
可能であればその方法もご教授頂けないでしょうか。

・HTML内、フォームエレメントのメニューリストの項目を
　外部ファイルを読み込んで動的に生成したい

<select name="select">
<option value="１">リスト１</option>
<option value="２">リスト２</option>
<option value="３">リスト３</option>
</select>

上記のvalueの値とリスト１、リスト２、リスト３の
部分を外部ファイルを読み込んで生成したいのです。
外部ファイルの内容は、CGIによって別途更新されます。

以上不足部分は補足致します。
どうぞよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.6ベストアンサー

こんにちは。


回答遅くなってすみません。
私がよくやる方法は以下の通りです。

さて、インクルードを使用できるのであれば、
(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』を書き変えればＯＫなので、楽なのでは。。

ご参考になれば幸いです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅れてしまい申し訳ありませんでした。
サーバはSSI使用可のようなので、早速活用したいと思います。
ご親切な解説、誠にありがとうございました。

通報する
お礼日時：2002/09/04 22:13

No.7

  • 回答者： ittochan
  • 回答日時：

これなら、


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と同じね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

インラインフレームを活用するやつですね。
ittochanさんにも、いろいろ情報をご提供頂き
感謝致します。本当にありがとうございました。
結論としては、SSIが使用可能なようなので、今回は
SSIにて対処したいと思います。
ですが、今後SSIが不可な場合にはittochanさんを初めとする
皆様から頂いたテクニックを参考にさせて頂きたいと
思います。本当にありがとうございました。

通報する
お礼日時：2002/09/04 22:24

No.5

こんにちは。


JavaScriptでの回答ではないので、見当違いかもしれませんが、インクルードファイル（SSI）の使用はできませんか（サーバによりますが）？
それが一番てっとり早く、また、ファイル内はHTMLタグだけで良いのですが・・・。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご指摘、ごもっともです。
SSIが使用可かどうか、未確認ですので
早速調べてみたいと思います。
処理としては、外部ファイルを取り込んでリストを生成して、
表示、となると思うのですが、SSIの場合ですと、
（１）includeで外部ファイル取り込み
（２）execでリスト生成
（３）execでリスト表示
といったような使い方で正しいでしょうか？
SSIは使用経験がなく、インターネットにて先程リファレンス
を閲覧した程度のレベルです。大まかで結構ですので
掲題のケースでの使用法保をご教授頂けないでしょうか。
なんだかJavaScriptのカテゴリから外れてしまいますが、
ぜひ、よろしくお願いします。

通報する
お礼日時：2002/08/30 00:59

No.4

  • 回答者： ittochan
  • 回答日時：

＞削除が頻繁に行われてしまいます。


でしたら、データファイルを

リスト１,リスト２,リスト３
１,２,３

これを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(・_・；)
    • good
    • 0
    • 件
通報する
この回答へのお礼

ittochan様
お礼が遅れてしまい、申し訳ありませんでした。
コーディングまでして頂き恐縮です。
スタイルシートの外部スクリプト取り込みを利用するわけ
ですね。いろんな方法があるのですね。勉強になりました。
参考にさせて頂きます。ありがとうございました。
IE５以上というのが残念っ！！

通報する
お礼日時：2002/08/30 00:44

No.3

>外部ファイルの内容は、CGIによって別途更新されます。


このCGIを変更/追加できるのであればJavaScriptのコードを直接生成してやればよいと思います。
変更できないのであれば、IEの場合(やり方はいろいろあると思いますが)例えば、
<iframe name="data" width="0" height="0" src="datafile"></iframe>
で外部ファイルを読み込んで、
top.data.document.body.innerText
を外部ファイルのフォーマットに応じて改行コードや区切り文字などで分解してやればできそうな気がします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど、不可視のインラインフレームですか。
そういう方法もあるんですね。
IE限定というのが残念ですが、取り込んだdatafileにネスケやMacでも
スクリプトではアクセスできる、なんてことはないですよね。(^^;
少し調べてみます。
ただ結局のところ、皆様がおっしゃっているように、CGIでデータファイルを、
jsファイルとして生成して、それを取り込む方法しかないのかな、
と考えております。
ご助言、本当にありがとうございました。

通報する
お礼日時：2002/08/25 08:34

No.2

  • 回答者： ittochan
  • 回答日時：

<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]);
}

こんなのはどうでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ittochanさん、ご回答ありがとうございます。
後者のスクリプト部分を生成するということですね。
今更の補足なのですが、「リスト１」、「リスト２」、「リスト３」
の部分と「value=１」、「value=２」、「value=３」の部分は
追加、削除が頻繁に行われてしまいます。なので、動的生成を行う
外部ファイルはできるだけシンプルな形式にしたいと思っているのです。
（(^^;冗長な作り方の割に我侭ですみません。）
でも参考にさせて頂きます。有難うございました。

通報する
お礼日時：2002/08/25 08:25

No.1

  • 回答者： osamuy
  • 回答日時：

例えば、



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>

でも素直に、サーバー側で処理する方が、簡単なような気が。
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど、そういう風にjsファイルをリストメニューの要素として
取り込むこともできるんですね。勉強になりました。
そのページ全体をPerlやPHPなどで生成できれば簡単なのですが、
そのセレクトメニューがサイト全体のHTMLページに設置されるものなので、
（クイックリンクメニューとして使用される）
どうしてもHTML埋め込みである必要があったのです。
osamuyさんの手法を少し研究してみたいと思います。
どうもありがとうございます。

通報する
お礼日時：2002/08/25 08:07

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報