ベストアンサー

HP上の選択ボタンの選択肢リストを別ファイルから読んでほしい

2003/11/12 09:32

ホームページ作成初心者です。 HP上に選択ボタンを出して数十人の人名を選択できるようにしたいのです。そのページのソースに選択肢を直に羅列させればできるのは知っているのですが、その選択肢リスト（人名）が割りと変動しやすく、また、複数のページで使用したいリストである場合、一つのファイルにリストを書いて、それだけを管理すれば変更が楽になると思うのです。可能でしょうか？ちなみにその選択を実行するのはHPの更新者だけで、HPを見る側がそれをいじる必要はないのですが、毎回人名を打ち込むのが手間なのでなんとかできないかと思うのです。どなたか教えていただけると助かります。

hena011
お礼率75% (6/8)

HTML
回答数6
ありがとう数4

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

spnk55
ベストアンサー率29% (11/37)

2003/11/13 10:47 回答No.6

前回のJavaScriptの記述では、階層順に場所を指定していたので、 (document→form→textareaというふうに) 表のセル内とか、別の場所に移動してしまうと、その階層順が変わってしまい、データが参照できなくなってエラーが出てしまうんです。今回、階層順に指定するのではなくて、直接名前を指定するように変更してみましたので、別の場所に移動しても大丈夫(なはず!?)です。それと、新たに部署ファイルを作成しようとすれば、部署用に新たにJavaScriptの関数を定義し直す必要があり、 .jsファイルの使い回しができないんですね・・・以下は記述のあとで、HP作成ソフトを使って表内に収め、整形してみました。はっきり言ってだらだら長くて、決してエレガントな記述でありません(汗) ちなみにCLICKボタンをクリックするとデータをアラート表示させるようにしていますが、これをサーバーへ送るように設定するとなるとCGIが絡んでくるので、その場合は、管理者の方に相談してみてください。 HTMLファイル *************************************** <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script type="text/javascript" src="jinmei.js"> </script> <script type="text/javascript" src="busyo.js"> </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </head> <body onLoad="FUNC(),FUNC1()"> <form> <table> <TBODY><TR><TD></TD><TD></TD></TR> <TR><TD valign="top"> <select id="select2" onChange="FUNC5()"> <option>部署名を選択してください </select></TD> <TD><textarea id="textarea2" cols="15" rows="5"> </textarea></TD></TR><TR><TD></TD> <TD align="center"> <input type="button" value="CLICK!" onClick="FUNC6()"> <input type="button" value="RESET" onClick="FUNC7()"> </TD></TR><TR><TD></TD><TD></TD></TR> <TR><TD valign="top"> <select id="select1" onChange="FUNC2()"> <option>人物名を選択してください </select></TD><TD> <textarea id="textarea1" cols="15" rows="5"> </textarea></TD></TR><TR><TD></TD> <TD align="center"> <input type="button" value="CLICK!" onClick="FUNC3()"> <input type="button" value="RESET" onClick="FUNC4()"> </TD></TR><TR><TD></TD><TD></TD></TR><TBODY> </TABLE> </form> </body> </html> *************************************** 外部ファイル1(jinmei.js) *************************************** jinmei=new Array(); jinmei[0]="aaa"; // ここに人名を入力 jinmei[1]="bbb"; // ここに人名を入力 jinmei[2]="ccc";　// ここに人名を入力 jinmei[3]="ddd"; jinmei[4]="eee"; function FUNC(){ x=new Array(); for(i=0;i<=jinmei.length-1;i++){ x[i]=document.createElement("option"); document.getElementById("select1").appendChild(x[i]); document.getElementById("select1").options[i+1].innerHTML=jinmei[i]; document.getElementById("select1").options[i+1].value=jinmei[i]; } } *************************************** 外部ファイル2(busyo.js) *************************************** busyo=new Array(); busyo[0]="11111"; // ここに部署を入力 busyo[1]="22222"; // ここに部署を入力 busyo[2]="33333";　// ここに部署を入力 busyo[3]="44444"; busyo[4]="55555"; function FUNC1(){ x=new Array(); for(i=0;i<=busyo.length-1;i++){ x[i]=document.createElement("option"); document.getElementById("select2").appendChild(x[i]); document.getElementById("select2").options[i+1].innerHTML=busyo[i]; document.getElementById("select2").options[i+1].value=busyo[i]; } } ***************************************

質問者

お礼 2003/12/27 22:07

ご解答ありがとうございました。しばらくこの質問上の仕事から遠ざかっていました。まだ完全に解決してはいないのですが、大変参考になりました。ありがとうございました。

その他の回答 (5)

spnk55
ベストアンサー率29% (11/37)

2003/11/12 16:06 回答No.5

HTMLの方、記述間違えてました。 <script type="text/javascript" src="test2.js"> 　　　　　　　↓ <script type="text/javascript" src="jinmei.js">

質問者

お礼 2003/11/12 17:28

ありがとうございます。ただいまNo.2のやり方でトライしているところでした。形としてはまさに私のやりたかったことができたのですが、 1.セルのなかにformを入れると選択リストのレイアウトがおかしくなる。 2.選択してみるとエラーがでる。 3.欲張って、人名に加えて部署名も外部から選択できるかな？と思い部署リストのjsファイルを作ったら全然駄目だった。といったことが発生し、spnk55様の記述の読解格闘中でした。私の挿入位置が多分違うのだと思います。勉強中なもので・・・。No.4も試してみます。重ね重ねありがとうございます。また結果を追加させていただきます。

spnk55
ベストアンサー率29% (11/37)

2003/11/12 16:03 回答No.4

#2です。もっとよい方法がないか、あれこれ考えておりました(￣～￣;) HTMLファイル **************************** <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> <title></title> <script type="text/javascript" src="test2.js"> </script> <script type="text/javascript">  </script> </head> <body onLoad="FUNC()"> <form name="form1"> <select name="select1" id="select2" onChange="FUNC2()"> <option>以下から選択してください </select> <textarea name="textarea1" cols="15" rows="5"> </textarea> <input type="button" value="CLICK!" onClick="FUNC3()"> <input type="button" value="RESET" onClick="FUNC4()"> </form> </body> </html> **************************** 外部ファイル(jinmei.js) **************************** jinmei=new Array(); jinmei[0]="aaa"; // ここに人名を入力 jinmei[1]="bbb"; // ここに人名を入力 jinmei[2]="ccc";　// ここに人名を入力 jinmei[3]="ddd"; jinmei[4]="eee"; function FUNC(){ x=new Array(); for(i=0;i<=jinmei.length-1;i++){ x[i]=document.createElement("option"); document.getElementById("select2").appendChild(x[i]); document.form1.select1.options[i+1].innerText=jinmei[i]; document.form1.select1.options[i+1].value=jinmei[i]; } } **************************** 上の例ですと、外部ファイルに jinmei[0]="人名"; jinmei[1]="人名"; jinmei[2]="人名"; jinmei[3]="人名"; jinmei[4]="人名"; 　　・　　・という要領で追加していけばOKで、 HTMLファイルの方をいじる必要はありません。また複数の人名を選択して、隣のテキストエリアに表示できるようにしてみました。ご参考になりますやら・・・(汗)

shige_70
ベストアンサー率17% (168/946)

2003/11/12 13:16 回答No.3

そのホームページを置いているサーバはどの程度自由に扱えますか? プロバイダでしたら、OSやhttpサーバソフトは何か、またcgi,ssiは使用可能か、などの前提条件をご提示ください。

質問者

お礼 2003/11/12 17:13

私が作成しているのは、会社のHPで社内の人間だけがみるための部分です（社内連絡的な）。会社のWEBサーバに送っているのですが、それ以上の詳しいことは管理者に聞かないと分かりません。今日は不在のようで、shige_70様のご質問には私の知識では答えられません。明日以降に補足をさせていただきます。よろしくお願いします。

spnk55
ベストアンサー率29% (11/37)

2003/11/12 12:43 回答No.2

プルダウンメニューの中から一人だけ選択するのであれば、このようなスクリプトはどうでしょうか? HTMLファイル **************************** <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> <title>test</title> <script type="text/javascript" src="jinmei.js"> </script> <script type="text/javascript">  </script> </head> <body onLoad="FUNC()"> <form name="form1"> <select name="select1" onChange="FUNC2()"> <option>以下から選択してください <option> <option> <option> // 必要な数だけ "option"を増やす </select> <input type="text" name="text1"> </form> </body> </html> **************************** 外部ファイル(jinmei.js) **************************** jinmei=new Array(); jinmei[0]="aaa"; // ←ここに人名を入力 jinmei[1]="bbb"; // ←ここに人名を入力 jinmei[2]="ccc";　// ←ここに人名を入力 function FUNC(){ for(i=0;i<=jinmei.length-1;i++){ document.form1.select1.options[i+1].innerText=jinmei[i]; document.form1.select1.options[i+1].value=jinmei[i]; } } **************************** 外部ファイル"jinmei.js"は、メモ帳などにコピーして、拡張子を.jsに変更して、HTMLと同じフォルダ内に保存してください。また、aaaやbbbの箇所を人名に置き換えてください。それと、HTMLの方のoptionタグも、人数の増減に合わせて変更してください。選択した人名をどう処理するのかがわかりませんが、上の例では、プルダウンメニュー横のテキストボックス内に表示させるようにしています。なお、IE以外のブラウザでは正常に動作しないかもしれません(汗) もっとよい方法があると思いますし、また趣旨と違っているかもしれませんので、あくまで参考ということで・・・(汗)

akira212
ベストアンサー率24% (75/308)

2003/11/12 10:29 回答No.1

ＨＴＭＬだけでは、不可能ではないかと思います。まず、『一つのファイルにリストを書いて』は、外部JAvaScriptなどで、変数などで、書き込めばいいと思います。配列などに書けばよいと思います。また、自身でも操作したくない。『毎回人名を打ち込むのが手間なのでなんとかできないかと思うのです』については、新規作成ボタンが欲しいということでしょうか？こうなると、ＣＧＩやＡＳＰといった、ちょっと難しいプログラムが必要になるのではないかと。。。

質問者