プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：hena011
  • 質問日時：
  • 回答数：6件

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

通報する

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

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： spnk55
  • 回答日時：

前回の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">
<!--
a="";

function FUNC2(){
b=document.getElementById("select1").value;
a+=b;
a+="\n";
document.getElementById("textarea1").value=a;
}

function FUNC3(){
alert(a);
}

function FUNC4(){
a="";
document.getElementById("textarea1").value="";
}
//-->
</script>

<script type="text/javascript">
<!--
aa="";

function FUNC5(){
b=document.getElementById("select2").value;
aa+=b;
aa+="\n";
document.getElementById("textarea2").value=aa;
}

function FUNC6(){
alert(aa);
}

function FUNC7(){
aa="";
document.getElementById("textarea2").value="";
}
//-->
</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];
}
}
***************************************
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2003/12/27 22:07

No.5

  • 回答者： spnk55
  • 回答日時：

HTMLの方、記述間違えてました。



<script type="text/javascript" src="test2.js">
　　　　　　　↓
<script type="text/javascript" src="jinmei.js">
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2003/11/12 17:28

No.4

  • 回答者： spnk55
  • 回答日時：

#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">
<!--
a="";

function FUNC2(){
b=document.form1.select1.value;
a+=b;
a+="\n";
document.form1.textarea1.value=a;
}

function FUNC3(){
alert(a);
}

function FUNC4(){
a="";
document.form1.textarea1.value="";
}
//-->
</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ファイルの方をいじる必要はありません。

また複数の人名を選択して、隣のテキストエリアに表示できるようにしてみました。

ご参考になりますやら・・・(汗)
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： shige_70
  • 回答日時：

そのホームページを置いているサーバはどの程度自由に扱えますか?


プロバイダでしたら、OSやhttpサーバソフトは何か、またcgi,ssiは使用可能か、などの前提条件をご提示ください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2003/11/12 17:13

No.2

  • 回答者： spnk55
  • 回答日時：

プルダウンメニューの中から一人だけ選択するのであれば、


このようなスクリプトはどうでしょうか?

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">
<!--
function FUNC2(){
document.form1.text1.value=document.form1.select1.value;
}
//-->
</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以外のブラウザでは正常に動作しないかもしれません(汗)

もっとよい方法があると思いますし、また趣旨と違っているかもしれませんので、
あくまで参考ということで・・・(汗)
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： akira212
  • 回答日時：

ＨＴＭＬだけでは、不可能ではないかと思います。



まず、『一つのファイルにリストを書いて』は、外部JAvaScriptなどで、変数などで、書き込めばいいと思います。配列などに書けばよいと思います。

また、自身でも操作したくない。

『毎回人名を打ち込むのが手間なのでなんとかできないかと思うのです』については、新規作成ボタンが欲しいということでしょうか？
こうなると、ＣＧＩやＡＳＰといった、ちょっと難しいプログラムが必要になるのではないかと。。。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
やはりジャバ等が必要なんですね。
人名を打ち込むのが手間、というのは決まった欄に人名を表示させるにあたって打ち込まずに選択ボタンから表示をしたい、という意味です。質問内容が伝わりにくいのでは、と自分でも思いながらの投稿でしたので・・・すみません。

通報する
お礼日時：2003/11/12 17:07

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

Q質問する（無料）

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

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

Q質問する（無料）

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

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

おすすめ情報