- ベストアンサー
フォームのメニューリストを外部ファイルを読み込んで動的生成する方法
お世話になっております。 下記のような処理を実現したいのですが、どうも良い方法が 見つかりません。できるならば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さんの手法を少し研究してみたいと思います。 どうもありがとうございます。
関連するQ&A
- 『リスト/メニュー』の項目
恐れ入りますが、質問させて頂きます。 現在DreamWeaverというソフトを使用してHPを作成しています。 そこで、閲覧者にリスト/メニューボックスを使用して月を選択 する部分を作成したいと考えております。（現在は以下の通り） ここを、現在の日にちによって選べる項目を変える仕様にしたい のですが、このような事は可能でしょうか？ 具体的には2月20日までは項目『2』を選択出来るが、2月21日以降は 選択が不可になる等。 何卒、宜しくお願い致します。 <SELECT NAME="select"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </SELECT>
- ベストアンサー
- HTML
- リストメニューに反映させる内容
list.dat 内 $list1,$list2,$list3,$list4,$list5,$name1,$name2,$name3,$name4,$name5, print "<select name=list>\n"; print "<option value="0">未選択</option>\n"; print "<option value="1">$name1</option>\n"; print "<option value="2">$name2</option>\n"; print "<option value="3">$name3</option>\n"; print "<option value="2">$name4</option>\n"; print "<option value="3">$name5</option>\n"; print "</select>\n"; list.dat内のデータをselectメニューに反映させたいのですが、自分の頭ではかなり難しい事のようで、行き詰ってしまいました。 質問の仕方が下手で、どのように書いていいのかわからないのですが、やりたいことは、 $list1の名前が$name1 $list2の名前が$name2 というように、$listと$nameに付けられた数値番号が同一のものがセットになります。 この両方の変数にデーターが入っている場合のみ、セレクトメニューに反映させます。 例えばlist.dat内が $list1,,$list3,,$list5,$name1,$name2,$name3,$name4,, のような場合は、 print "<select name=list>\n"; print "<option value="0">未選択</option>\n"; print "<option value="1">$name1</option>\n"; print "<option value="3">$name3</option>\n"; print "</select>\n"; このようになります。 上のような作りは無理でしょうか？ お力をおかし頂けると幸いです。
- ベストアンサー
- Perl
- リストボックスを使って検索フォームを作りたいのですが
教えて！ｇｏｏの質問フォームのようなものが作りたいのですが出来なくて困っています。 リストボックスを２つ設けて、最初のリストボックスから選んだ項目によって、次のリストボックスに表示させる項目を選択したいのですが。 例えば、下のlist1のリストボックスから「名前」を選んだ場合にはlist2のリストボックスに氏名を、「日付」を選んだ場合には日付をリストに表示したいですが．．． <SELECT name="list1"><OPTION value=default>検索項目</OPTION> <option value=name>名前</option>); <option value=date>日付</option>); <option value=team>チーム</option>); </SELECT> <SELECT name="list2"><OPTION value=default>氏名</OPTION> <option value=suzuki>鈴木</option>); <option value=sato>佐藤</option>); <option value=tanaka>田中</option>); </SELECT> <SELECT name="list2"><OPTION value=default>日付</OPTION> <option value=2004>2004年度</option>); <option value=2003>2003年度</option>); <option value=2002>2002年度</option>); </SELECT> 書き方や説明が分かりにくいかもしれませんが、よろしくお願いします。
- ベストアンサー
- PHP
- CGI.ｐｍによるプルダウンメニューのvalue値取得方法について
CGI.ｐｍを使ってプルダウンメニューのvalue値を得たいのですが、ラジオボタンと同じ記述で取得できると聞きましたが上手くいきません。ちなみにラジオボタンはうまくいきました。HTMLの記述が良くないのでしょうか？教えてください。 【HTML】 <select size="1" name="q1"> <option>選択してください</option> <option value="Ａ">Ａ</option> <option value="Ｂ">Ｂ</option> <option value="Ｃ">Ｃ</option> </select> 【CGI】 use CGI; $q = new CGI; $p1 = $q->param('q1');
- ベストアンサー
- Perl
- javascriptでプルダウンメニューの外部ファイル化について
以下のjavascriptを外部ファイルにしたいのですが、外部ファイル、HTML部分ともに、どのように記述すればいいのか教えて頂けませんでしょうか？ よろしくお願いします。 <html> <head> <script language="JavaScript"> <!-- var 果物 = new Array("りんご","いちご","みかん","ドリアン","ライム"); var 野菜 = new Array("じゃがいも", "にんじん", "舞茸", "たまねぎ", "ピーマン"); var 肉 = new Array("牛肉", "豚肉", "鶏肉", "ラム", "ソーセージ"); var 魚 = new Array("鮭", "鰤", "鰯", "鮪", "秋刀魚"); var 酒 = new Array("ロンリコ", "ズブロッカ", "スピリダス", "焼酎", "ワイン"); var 菓子 = new Array("チョコレート", "スナック", "アイス", "キャンディー", "キャラメル"); function swapOptions(the_array_name) { var numbers_select = window.document.the_form.the_examples; var the_array = eval(the_array_name); setOptionText(window.document.the_form.the_examples, the_array); } function setOptionText(the_examples, the_array) { for (loop=0; loop < the_examples.options.length; loop++) { the_examples.options[loop].text = the_array[loop]; the_examples.options[loop].value = the_array[loop]; } } function Load() { var the_array = eval(果物); setOptionText(window.document.the_form.the_examples, the_array); } // --> </script> </head> <body onLoad="Load();"> <form name="the_form" method="POST" action="" onSubmit="return Check()"> <select name="choose_category" onChange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);"> <OPTION value="果物" selected>果物 <OPTION value="野菜" >野菜 <OPTION value="肉" >肉 <OPTION value="魚" >魚 <OPTION value="酒" >酒 <OPTION value="菓子" >菓子 </select> <select name="the_examples"> <OPTION value="0" selected>りんご <OPTION value="1" >いちご <OPTION value="2" >みかん <OPTION value="3" >ドリアン <OPTION value="4" >ライム </SELECT> <from> </body> </html> また、次のサイト（http://www.carsensor.net/）では「メーカー・地域・価格から探す」からメーカー選択後、車名部分ではそのメーカーに該当するものが選択できますが、これは上の方法とは違うように思うのですが、どういった方法なのでしょうか？
- ベストアンサー
- JavaScript
- 同じプルダウンメニューの外部化
フォームのプルダウンを使用して メニューを作成しているのですが、 ソースが長くなってしまうのでなんとかJavaScriptで外部化出来ないかと考えております。 <select> <option>Ａ</option> <option>Ｂ</option> <option>Ｃ</option> ・ ・ ・ </select> 上記の様なイメージのselectが1000個くらい必要となり かなりずらずらと書かなければなりません。 そこで、<option>の中身を外部のJavaScriptファイルから読み込んで表示出来ないかと思っています。 なにか良い方法をご存じの方いらっしゃいましたらご教授下さい。
- 締切済み
- JavaScript
- Javascriptの中に外部jsファイルを呼び出したい。
入力フォームで都道府県などのたくさん項目がある プルダウンメニューやセレクトボックスを外部化し jsの中には document.write('<option value="1">北海道</option>'); document.write('<option value="2">青森</option>'); document.write('<option value="3">岩手</option>'); document.write('<option value="4">宮城</option>'); などとし、ファイル名は「todou.js」としました。 セレクトボックスの外部ファイルは document.write('<option value="1">インターネット</option>'); document.write('<option value="2">テレビ</option>'); document.write('<option value="3">新聞</option>'); などとし、外部ファイルは「kikkake.js」としました。 htmlのところには <tr><td>都道府県：</td> <td><select> <script src="select1.js"type="text/javascript"> </script> などとし、載せることはできました。 しかし、最後に送信ボタンを押した時に 確認するためにアラートで選択したものを出したい時に どうやって呼び出したらよいのでしょうか？ 色々調べてみたらまず <script language="JavaScript" src"todou.js"></script> とすると書いてありました。 しかし複数の外部ファイルを呼び出すためにはどうしたら よいのでしょうか？ あとアラートで確認するために function Check(){ var myTodou = document.myForm.src"todou.js".value; alert('都道府県：' + myTodou); とするのでしょうか？ 不備部分がありましたらご指摘ください。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- 外部jsファイル参照での正しい文法について
現在、下記のような文法でセレクトのオプション項目を 外部jsを参照して使っています。 これで動作に関しては問題なく作動していますが、 文法的には正しくないですよね? <script>を<select></select> 内に書いてはいけない? 直接インライン要素を書いてはいけない? この場合、文法的には正しくはどのように書けばいいのでしょうか?? 出来るだけ正しい文法で作成したいので教えてください。 よろしくお願いします。 ※文法チェックにはこちらのサイトを利用しました。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 解説43の「<script>を<select>～</select> 内に書くことはできません。」と、 解説169の「どの <option> にも selected 属性が指定されていません。」で、文法違反と出ています。 http://openlab.ring.gr.jp/k16/htmllint/explain.html (169は外部jsに対応していないだけ?) 【html】(xhtml1.0) <select name="s01"> <script type="text/javascript" src="select.js"></script> </select> 【jsファイル】 with ( document ){ writeln( '<option value="0" selected>項目</option>' ); writeln( '<option value="1">項目A</option>' ); writeln( '<option value="2">項目B</option>' ); }
- ベストアンサー
- HTML
- 外部ファイルからの値の取得
初めまして、ktamonと申します HTMLで設定ファイルから値を取得するようなことは 可能でしょうか？ 例えば、 <option value="6">６列</option> とあったときに6の部分をpropertiesファイルのような物 で持っておき可変にしたいのですが。 可能なようでしたらその方法を教えてください。 よろしくお願いします
- ベストアンサー
- JavaScript
- プルダウンメニューのフォームについて
プルダウンメニューって１回リロードするとデフォルトのメニュー （一番上のメニュー、またはselected属性のメニュー）が選択されますよね。 たとえば、以下のフォームでチョキを一度「送信」すると、 再読み込みにされて「グー」が表示されてしまいます。 これを「送信」した後も「チョキ」を連続で選択できるようにしたいのですが良い方法はあるでしょうか？ （利用者が一旦別のページに飛んだ場合はデフォルトに戻っていいのですが・・） --------------------------------------- <form method="post" action="janken.php"> モード <select name="mode" size="1"> <option value="janken">ジャンケン</option> <option value="gp">グーパー</option> </select> 手 <select name="skill" size="1"> <option value="goo">グー</option> <option value="choki">チョキ</option> <option value="par">パー</option> </select> <input type="submit" value="送信"> </form> 以下、結果を出力するphp ------------------------------------- htmlタグだけで実現可能でしょうか？ htmlで不可の場合、phpを使用するつもりですが、 if文で一つ一つのメニューに「前回コレを送信していたら選択」というのが思い浮かびますが、 もっとスマートなやり方はあるでしょうか？ 別の質問になりますが、モードで「グーパー」を選んでいる時はチョキを選択できないようにしたいのですが、これはhtmlだけでは実現不可能でしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
お礼が遅れてしまい申し訳ありませんでした。 サーバはSSI使用可のようなので、早速活用したいと思います。 ご親切な解説、誠にありがとうございました。