同一ページに複数のプルダウンメニューをつけたいのですが、
どうすればよいのでしょうか。

下記のように1つはつけることができたのですが、
2つめから、どこをどう変えて追加すればよいのかわかりません。


<script language="javascript">
<!--
function A_Li(){
Sel=document.Link1.OP.selectedIndex;
Ms=document.Link1.OP.options[Sel].value;
parent.main.location.href=Ms;}
// -->
</script>


<FORM name="Link1">
<SELECT name="OP" onChange="A_Li()" size="1">
<OPTION Value="main.htm" SELECTED>ページを選んでください
<option value="main.htm">ぺージ1</option>
<OPTION Value="abc.htm">ページ2
<OPTION Value="def.htm">ページ3
</SELECT>

よろしくお願いします。

A 回答 (1件)

最低限、違わなければならないのは、SELECT の name 値です。


また、質問のように FORM 名や SELECT 名を直接参照している場合、A_Li() という関数と同じような関数が、もう1つ必要になります。
こんな感じになるでしょうか。

<script language="javascript">
<!--
function A_Li() {
  Sel=document.Link1.OP.selectedIndex;
  Ms=document.Link1.OP.options[Sel].value;
  parent.main.location.href=Ms;}
function B_Li() {
  Sel=document.Link1.OP2.selectedIndex;
  Ms=document.Link1.OP2.options[Sel].value;
  parent.main.location.href=Ms;}
// -->
</script>


<FORM name="Link1">
<SELECT name="OP" onChange="A_Li()" size="1">
<OPTION Value="main.htm" SELECTED>ページを選んでください
<option value="main.htm">ぺージ1</option>
<OPTION Value="abc.htm">ページ2
<OPTION Value="def.htm">ページ3
</SELECT>

<SELECT name="OP2" onChange="B_Li()" size="1">
<OPTION Value="aaa.htm" SELECTED>ページを選んでください
<option value="bbb.htm">ぺージ1</option>
<OPTION Value="ccc.htm">ページ2
<OPTION Value="ddd.htm">ページ3
</SELECT>

もちろん OP2が、OP とは異なる FORM になる場合、B_Li() 内の Link1 という部分も変えなければなりません。

でも、ただページを飛ばすだけの関数を2つも用意するのもなんなので、次のように SELECT オブジェクト自身(this)を関数に渡すようにすれば、関数は1つで済みます。

<script language="javascript">
<!--
function A_Li(obj) {
  Sel=obj.selectedIndex;
  Ms=obj.options[Sel].value;
  parent.main.location.href=Ms;}
// -->
</script>


<FORM name="Link1">
<SELECT name="OP" onChange="A_Li(this)" size="1">
<OPTION Value="main.htm" SELECTED>ページを選んでください
<option value="main.htm">ぺージ1</option>
<OPTION Value="abc.htm">ページ2
<OPTION Value="def.htm">ページ3
</SELECT>

<SELECT name="OP2" onChange="A_Li(this)" size="1">
<OPTION Value="aaa.htm" SELECTED>ページを選んでください
<option value="bbb.htm">ぺージ1</option>
<OPTION Value="ccc.htm">ページ2
<OPTION Value="ddd.htm">ページ3
</SELECT>

thisについては、JavaScriptの本などで調べてみて下さい。
    • good
    • 0
この回答へのお礼

なるほど、とてもよくわかりました。
きちんと動作しておかげさまで、作業できます。

助かりました。
ありがとうございました!

お礼日時:2001/10/26 08:53

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

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

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

Q

HTML の <FORM> の

<SELECT>
<OPTION VALUE="11">AAA</OPTION>

の<OPTION >を JavaScript で設定しようと考えています。

方法ご存知の方いらっしゃいましたら、御教授願います。

また、JavaScript のメソッド/プロパティが網羅的に記述されている Web Page 等ありましたら、ぜひURLを教えてください。


よろしくお願い致します。

Aベストアンサー

> の<OPTION >を JavaScript で設定しようと考えています。

例えば、こんな感じでやります。

<form name="F">
<select name="S">
</select>
</form>

<!-- ★★★★★★ ここから -->
<script type="text/JavaScript">
S = document.X.S;
if (S.options.length < 1) {
S.options[0] = new Option("ラベル1", "値1");
S.options[1] = new Option("ラベル2", "値2");
S.options[2] = new Option("ラベル3", "値3");
history.go(0);
}
</script>
"ラベルn" が属性 label に対応し、"値n" が属性 value に対応します。

> また、JavaScript のメソッド/プロパティが網羅的に記述されている Web Page 等ありましたら、ぜひURLを教えてください。

私は、本家のページ(→参考URL)を良く見ます。

参考URL:http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm

> の<OPTION >を JavaScript で設定しようと考えています。

例えば、こんな感じでやります。

<form name="F">
<select name="S">
</select>
</form>

<!-- ★★★★★★ ここから -->
<script type="text/JavaScript">
S = document.X.S;
if (S.options.length < 1) {
S.options[0] = new Option("ラベル1", "値1");
S.options[1] = new Option("ラベル2", "値2");
S.options[2] = new Option("ラベル3", "値3");
history.go(0);
}
</script>
"ラベルn" が属性 label に対応し、"値n" が属...続きを読む

QNew OPTIONで作った