いろんなページでプルダウンメニューをつけていると、更新とかのときにいちいち全てに手を入れなくてはならなくて大変なのですが、スタイルシートの時のように外部スタイルシートを読み込むみたいなことをしたいと思っているのですが方法がまだわかりません。ご教授をお願いします。また、そういうことを学習できるサイトとかがありましたら教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

「外部JavaScriptファイル」を使えば簡単にできます。


外部JSファイルは普通のテキストファイルで、拡張子は「js」にします。
これを読み込むには、HTMLのHEAD領域に、
 <SCRIPT language="JavaScript" src="外部JSファイル名.js"></SCRIPT>
と書きます。
この SCRIPT タグは、必ず閉じる必要があります。
そして、外部JSファイル内にプルダウンの設定を行う関数を書き、これを各HTMLから呼び出します。

No.1 の方法が正攻法だと思うのですが、どうも NN4 では思うようにならないので、別の方法も挙げておきます。
(OPTION は設定されるのですが、プルダウンの幅が短いままになってしまいます。)

■option.js
function drawOption(doc) {
  doc.writeln('<OPTION value="送信値1">テキスト1');
  doc.writeln('<OPTION value="送信値2">テキスト2');
}
※↑にOPTIONタグの内容を、そのまま書きます。

■HTMLのHEAD領域
<SCRIPT language="JavaScript" src="option.js"></SCRIPT>

■プルダウンを設置したい箇所
<SELECT …>
<SCRIPT language="JavaScript"><!--
 drawOption(document)
//--></SCRIPT>
</SELECT>

IE5.0/IE5.5/NN4.7/NN6.2 動作確認済み
    • good
    • 0
この回答へのお礼

早々の回答を感謝します。おかげさまでこれまでプルダウンメニューのたくさんのリンクに手を入れていたのがすっきりと解決しまして非常に助かります。ご教授いただいた内容もすっきりと詳しく書かれていましたのでありがたかったです。今回を良い機会にとJavaScriptを少しづつ学習しようと思います。今度の回答は動作確認までしてくださいまして本当にありがとうございました。

お礼日時:2002/02/27 14:28

外部JavaScriptファイル内に、プルダウンを設定する関数を書いておきます。



例1:
function SetPulldown(SelectId){
var OptionTexts = new Array("1番目","2番目");
for(var i=0; i<OptionTexts.length; i++)
SelectId.options[i] = new Option(OptionTexts[i],i);
}

この関数が書いてあるjsファイルをプルダウンのあるHTMLファイルで
リンクします。で、HTMLファイルにはこう書きます。

例2:
<BODY ONLOAD="SetPulldown(Form1.Select1)">
<FORM ID="Form1">
<Select ID="Select1"></Select>
</FORM>


プルダウンの項目は例2の
var Options = new Array("1番目","2番目"); ←ここ
括弧の中の文字を増やした分だけ設定できます。

SelectId.options[i] = new Option(OptionTexts[i],i); ←ここ
OptionTextsは表示するテキスト、iはCGI等に送信される値(value)です。

もちろんiはOptionTextsと同じにすることもできます。


こんな感じでしょうかねぇ。
    • good
    • 0
この回答へのお礼

早速の回答をありがとうございました。ただ、私の理解力不足でここまで1日半かかってもうまくいきませんでした。HTMLファイルに設置したプルダウンメニューのリンクが出来なくて「デバックしますか」と表示されます。今回は幸いに「leaz024さん」のやり方でうまくいきましたのでそちらの方で決めようと思います。ありがとうございました。

お礼日時:2002/02/27 14:26

このQ&Aに関連する人気のQ&A

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

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qプルダウンで選択したCGIを動かしたい(ACTION=""をプルダウンで変更するには?)

プルダウンで選択したCGIを動かしたい(ACTION=""をプルダウンで変更するには?)

以下の
<option value="test1.cgi">テスト1 
<option value="test2.cgi">テスト2
<option value="test3.cgi">テスト3
<option value="test4.cgi">テスト4

4つのプルダウンメニューを選択して、それぞれ別のCGIを動かすには
どうしたらできますか?
よかったら教えて下さい。javascriptで出来そうな気がするのですが…




<FORM name="testname" method="post" ACTION="/cgi-bin/??????" >


<TABLE>

<TR><TD> テスト</TD>
<TD bgcolor="#FFFFFF">
<SELECT name="">
<option value="">
<option value="test1.cgi">テスト1 
<option value="test2.cgi">テスト2
<option value="test3.cgi">テスト3
<option value="test4.cgi">テスト4
</SELECT></TD>
</TR>

<TR>
<TD bgcolor="#cccccc" width="150"> 開始日</TD>
<TD bgcolor="#FFFFFF">
<input name="daysS" type="text" size="8">
</TD>
</TR>

<TR>
<TD bgcolor="#cccccc" width="150"> 終了日</TD>
<TD bgcolor="#FFFFFF">
<input name="daysE" type="text" size="8">
</TD>
</TR>

</TABLE>
<BR>

<INPUT type="submit"name="send"value="開始"> <INPUT type="reset" name="reset" valiu="消去">
</FORM>

プルダウンで選択したCGIを動かしたい(ACTION=""をプルダウンで変更するには?)

以下の
<option value="test1.cgi">テスト1 
<option value="test2.cgi">テスト2
<option value="test3.cgi">テスト3
<option value="test4.cgi">テスト4

4つのプルダウンメニューを選択して、それぞれ別のCGIを動かすには
どうしたらできますか?
よかったら教えて下さい。javascriptで出来そうな気がするのですが…




<FORM name="testname" method="post" ACTION="/cgi-bin/??????" >
...続きを読む

Aベストアンサー

<SELECT name="" onchange="testname.ACTION='/cgi-bin/'+this.value">
これで、アクションの指定ができると思います。

Qプルダウンで値選択後、Hpにもうひとつプルダウンを追加する方法について

初期表示上Aというプルダウンがあり、Aのプルダウンで、AAAを選択した場合にBというプルダウンを画面に追加表示させると言う事は可能なのでしょうか?
(AのプルダウンにBを追加するのは無く、画面そのものにプルダウンを追加)

過去を探してみても見つけれませんでした。
(検索機能で絞りました><)

リロードする以外に可能であれば、どのような例でも構いません。
ご教授頂ければと思います。

雑文恐れ入ります。

Aベストアンサー

こんな感じでしょうか?
----------
<HTML>

<HEAD>
<SCRIPT language="javascript">
<!--
function myFunc(){
if (document.form1.A.value=="aaa"){
document.form1.B.style.display="block";
}else{
document.form1.B.style.display="none";
}
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM name="form1">
<SELECT name="A" onChange="javascript:myFunc();">
<OPTION value="">
<OPTION value="aaa">aaa
<OPTION value="bbb">bbb
<OPTION value="ccc">ccc
</SELECT>
<SELECT name="B" style="display:none;">
<OPTION value="">
<OPTION value="111">111
<OPTION value="222">222
<OPTION value="333">333
</SELECT>
</FORM>
</BODY>

</HTML>

こんな感じでしょうか?
----------
<HTML>

<HEAD>
<SCRIPT language="javascript">
<!--
function myFunc(){
if (document.form1.A.value=="aaa"){
document.form1.B.style.display="block";
}else{
document.form1.B.style.display="none";
}
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM name="form1">
<SELECT name="A" onChange="javascript:myFunc();">
<OPTION value="">
<OPTION value="aaa">aaa
<OPTION value="bbb">bbb
<OPTION value="ccc">ccc
</SELECT>
<SELECT name="B" st...続きを読む

Qスタイルシートの変更

お世話になります。
サンプルページ作成とかで、ボタンなり文字リンクなりで簡単にスタイルを部分的に変更したいと思うのですがどうしたらいいんでしょうか?

divで囲まれた箇所のスタイルを■をクリックすることで変えられるようにしたいです。
よくある、onClicでバックカラーを変えるようなスクリプトはなんとなくわかるんですけど、div自体のスタイル変更?となってしまってどうしたらいいものかわからなくなってしまったので。
一応外部スタイルにしているので、部分的に変えるのは無理?なのかなとか思ったり。
ご教授よろしくお願いします。

例:たとえば

<div id="xxx">
テスト
</div>
<br>
<br>
■スタイル1 | ■スタイル2 | ■スタイル3

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style>
div.c1{color:black;}
div.c2{color:red;}
div.c3{color:green;}
</style>
<script type="text/javascript">
function F(n){
document.getElementById('xxx').className='c'+n;
}
</script>
</head>
<body>
<div id="xxx" class="c1">
テスト
</div>
<br>
<br>
<a href="#" onclick="F(1);return false">■スタイル1</a> |<a href="#" onclick="F(2);return false"> ■スタイル2</a>
| <a href="#" onclick="F(3);return false">■スタイル3</a>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style>
div.c1{color:black;}
div.c2{color:red;}
div.c3{color:green;}
</style>
<script type="text/javascript">
function F(n){
document.getElementById('xxx').className='c'...続きを読む

QJavaScriptとスタイルシートの併用

JavaScriptとスタイルシートの併用ってできますか?

そのときは、メタ要素の

content="text/css" と"text/javascript"

の指定はどうなるのでしょうか。かなり初心者的質問ですが、回答よろしくお願いします。

Aベストアンサー

当然できます。

<head>

他の定義

<script type="text/javascript">
<!--
JavaScriptの定義
// -->
</script>
<style type="text/css">
<!--
スタイルシートの定義
-->
</style>

他の定義

</head>

の様に、<head>~</head>の間にそれぞれについて定義すれば良いでしょう。
スタイルシートで定義した内容を、JavaScriptで修正する。などと言う、DHTML的な使い方も、この様な指定で問題ありません。

Qスタイルシート切替の標準化?

スタイルシートの切替というスクリプトが色々とあるようですが、その中でもスタイルシートの切替を容易にするための標準化というか、定義を決めているサイトがあったように思うのですが、知ってる方はいらっしゃいますでしょうか?

確か、そのページの趣旨はスタイルシートの内容をあらかじめ決めておいて、スタイルシートの切替スクリプトで利用できるようにしておき、それを皆で使えるようにしよう、という感じのページだったと思います。

お心当たりがある方、いらっしゃいましたら宜しくお願いいたします。

Aベストアンサー

違う。
スタイルシートの準拠がバラバラであるのでスタイルシートを切り替えする人が多いという話。

http://www.google.co.jp/search?hl=ja&lr=lang_ja&q=javascript%20%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B


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

人気Q&Aランキング

おすすめ情報