![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
お世話になっております。
下記のような処理を実現したいのですが、どうも良い方法が
見つかりません。できるならばHTMLページにJavascriptを
埋め込む形で実現したいのですが、可能でしょうか。また
可能であればその方法もご教授頂けないでしょうか。
・HTML内、フォームエレメントのメニューリストの項目を
外部ファイルを読み込んで動的に生成したい
<select name="select">
<option value="1">リスト1</option>
<option value="2">リスト2</option>
<option value="3">リスト3</option>
</select>
上記のvalueの値とリスト1、リスト2、リスト3の
部分を外部ファイルを読み込んで生成したいのです。
外部ファイルの内容は、CGIによって別途更新されます。
以上不足部分は補足致します。
どうぞよろしくお願いします。
No.6ベストアンサー
- 回答日時:
こんにちは。
回答遅くなってすみません。
私がよくやる方法は以下の通りです。
さて、インクルードを使用できるのであれば、
(1) pulldown.inc(pulldownは任意)というファイルを作成
(2) HTML内部にインクルードさせたい箇所に
<!--#include virtual="pulldown.inc" -->
を挿入
※パスに気をつけて下さい
(3) pulldown.inc内に必要なタグのみ記述
例)
<select name="select">
<option value="1">リスト1</option>
<option value="2">リスト2</option>
<option value="3">リスト3</option>
</select>
(4) .htaccesファイル内に以下の記述を追加(※必要であれば)
Addtype text/x-server-parsed-html .html
だけでOKなはずです。
もし、SSIを使用しないHTMLファイルも結構ある、という事でしたら、SSIを使用するファイル拡張子は『.shtml』として、上記(4)の記述を
Addtype text/x-server-parsed-html .shtml
としてください。
更新させたい時は、単にこの『pulldown.inc』を書き変えればOKなので、楽なのでは。。
ご参考になれば幸いです。
お礼が遅れてしまい申し訳ありませんでした。
サーバはSSI使用可のようなので、早速活用したいと思います。
ご親切な解説、誠にありがとうございました。
No.7
- 回答日時:
これなら、
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さんを初めとする
皆様から頂いたテクニックを参考にさせて頂きたいと
思います。本当にありがとうございました。
No.5
- 回答日時:
こんにちは。
JavaScriptでの回答ではないので、見当違いかもしれませんが、インクルードファイル(SSI)の使用はできませんか(サーバによりますが)?
それが一番てっとり早く、また、ファイル内はHTMLタグだけで良いのですが・・・。
ご指摘、ごもっともです。
SSIが使用可かどうか、未確認ですので
早速調べてみたいと思います。
処理としては、外部ファイルを取り込んでリストを生成して、
表示、となると思うのですが、SSIの場合ですと、
(1)includeで外部ファイル取り込み
(2)execでリスト生成
(3)execでリスト表示
といったような使い方で正しいでしょうか?
SSIは使用経験がなく、インターネットにて先程リファレンス
を閲覧した程度のレベルです。大まかで結構ですので
掲題のケースでの使用法保をご教授頂けないでしょうか。
なんだかJavaScriptのカテゴリから外れてしまいますが、
ぜひ、よろしくお願いします。
No.4
- 回答日時:
>削除が頻繁に行われてしまいます。
でしたら、データファイルを
リスト1,リスト2,リスト3
1,2,3
これを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様
お礼が遅れてしまい、申し訳ありませんでした。
コーディングまでして頂き恐縮です。
スタイルシートの外部スクリプト取り込みを利用するわけ
ですね。いろんな方法があるのですね。勉強になりました。
参考にさせて頂きます。ありがとうございました。
IE5以上というのが残念っ!!
No.3
- 回答日時:
>外部ファイルの内容は、CGIによって別途更新されます。
このCGIを変更/追加できるのであればJavaScriptのコードを直接生成してやればよいと思います。
変更できないのであれば、IEの場合(やり方はいろいろあると思いますが)例えば、
<iframe name="data" width="0" height="0" src="datafile"></iframe>
で外部ファイルを読み込んで、
top.data.document.body.innerText
を外部ファイルのフォーマットに応じて改行コードや区切り文字などで分解してやればできそうな気がします。
なるほど、不可視のインラインフレームですか。
そういう方法もあるんですね。
IE限定というのが残念ですが、取り込んだdatafileにネスケやMacでも
スクリプトではアクセスできる、なんてことはないですよね。(^^;
少し調べてみます。
ただ結局のところ、皆様がおっしゃっているように、CGIでデータファイルを、
jsファイルとして生成して、それを取り込む方法しかないのかな、
と考えております。
ご助言、本当にありがとうございました。
No.2
- 回答日時:
<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("リスト1","リスト2","リスト3");
var val = new Array("1","2","3");
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さん、ご回答ありがとうございます。
後者のスクリプト部分を生成するということですね。
今更の補足なのですが、「リスト1」、「リスト2」、「リスト3」
の部分と「value=1」、「value=2」、「value=3」の部分は
追加、削除が頻繁に行われてしまいます。なので、動的生成を行う
外部ファイルはできるだけシンプルな形式にしたいと思っているのです。
((^^;冗長な作り方の割に我侭ですみません。)
でも参考にさせて頂きます。有難うございました。
No.1
- 回答日時:
例えば、
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さんの手法を少し研究してみたいと思います。
どうもありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Selectボックスの幅を自動で広...
-
javascriptでselectボックスの<...
-
onchange等のイベントハンドラ...
-
プルダウン 項目が多いので先頭...
-
html selectの内容を初期値に戻す
-
現在時刻を取得してフォームのs...
-
テーブルにおける行(セルにプル...
-
ラジオボタンとドロップダウン...
-
【javascript・PHP】プルダウン...
-
JavaScriptでリストボックスを選択
-
リストボックスと連動したテキ...
-
リストボックスの選択状態によ...
-
プルダウンとテキストの連動
-
jQuery セレクトボックスで選択...
-
return trueとreturn falseの用...
-
<JavaScript>tableタグを入力不...
-
submitした値を返したい
-
Selectボックスの一覧表示方法
-
javaScriptの変数をJavaの変数...
-
プルダウンで選択すると、DBの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
jQuery セレクトボックスで選択...
-
JQuery selectが反映されない
-
selectメニューのselectedの位...
-
onFocusOutが複数回呼ばれる!
-
フォームのメニューリストを外...
-
セレクトを全て選択されていな...
-
現在時刻を取得してフォームのs...
-
Selectの中身をfor文で入れる
-
javascriptでselectボックスの<...
-
html selectの内容を初期値に戻す
-
ブラウザの戻るボタンを押した...
-
プルダウンで現在の年月日を取...
-
リストボックスの項目の順番を...
-
プルダウンとテキストの連動
-
<textarea>にプルダウンを表示...
-
【javascript・PHP】プルダウン...
-
UWSCのIE操作でプルダウンを選...
おすすめ情報