• ベストアンサー
  • すぐに回答を!

複数のプルダウンメニューの作り方。

・Aリスト、Bリスト…とプルダウンメニューを複数含んだフォームを一つのhtmlに作りたいのですが、上手くいきません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form> ご指南の程宜しくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数556
  • ありがとう数3

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

  • ベストアンサー
  • 回答No.2

両selectのonChangeを以下のように変更 onChange="MENU(this.options[this.selectedIndex].value);" 関数も以下のように変更 function MENU(url){ if( url != "" ) location.href = url; // valueが""のときリンクエラーを回避 } でいくんじゃないですか?

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答ありがとうございます。 すいません、質問内容が間違っていました。 再度内容を書き換えて質問させて頂きますので宜しくお願い致します。

関連するQ&A

  • 複数のプルダウンメニューの作り方。

    質問内容に不備があったため再度質問させて頂きます。 前回答えて下さった方には大変ご迷惑をおかけします。 非常に多くのものを奇麗に見せたいのでプルダウンメニューがいいと思い、作りました。 ・Aリスト、Bリスト、Cリスト…とプルダウンメニュー(メニューを選ぶとアンカー先に飛ぶようにしたい)を複数含んだフォームを一つのhtmlに作ったのですが、動作しません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 list.html <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="list.html#a001">A001</option> <option value="list.html#a002">A002</option> <option value="list.html#a003">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="list.html#b001">A001</option> <option value="list.html#b002">A002</option> <option value="list.html#b003">A003</option> </select> </form> <a id="a001" name="a001"></a>A001<br> <a id="a001" name="a002"></a>A002<br> <a id="a001" name="a003"></a>A003<br> <a id="a001" name="b001"></a>B001<br> <a id="a001" name="b002"></a>B002<br> <a id="a001" name="b003"></a>B003<br> あと、このように同じhtml内でのリンクになる場合は、optionのvalueのlist.htmlを省いてもいいのでしょうか? 当方、Javascriptに関してはコピペでしか使えない程度の知識の人間です。 ご指南の程宜しくお願いします。

  • プルダウンメニューで選んだリンクを別窓で表示させたい

    こんにちは。 プルダウンメニューで選んでもらうと 選んでもらった日にちのところに飛ぶように作っています。 ★GO★を押してもらった日にちの日記を 別窓で表示させるにはどこに _blank を入れたらいいのでしょうか? よろしくお願いします○┓ペコリ <script language="JavaScript"><!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --></script> <form name="myForm"> <select name="myMenu"> <option value="http://blog.livedoor.jp/***"> ■ブログTOP■ <option value="http://blog.livedoor.jp/01**" > *2/2の日記 <option value="http://blog.livedoor.jp/02**" > *2/3の日記 </select> <input type="button" value="★GO★" onClick="myGo()"> </form>

  • フレームのあるHPでプルダウンメニュー

    上左右とフレームの切ってあるHPをビルダーで作っている者です。 似た感じの質問を過去ログから検索して読みましたが、質問させてください。 左フレームにプルダウンメニューを設置して、 プルダウンメニューをクリックすると 右メインページが切り替えれる様にしたいのです。 http://www.red.oit-net.jp/tatsuya/java/combobo2.htm←この様なプルダウンメニューを設置したいのですが、 フレーム切り替えのタグをどこをどういじっていいのかわかりません。 現在ローカルファイルで作成中で、フォルダに 上フレーム:flame1.htm(完成) 左フレーム:flame2.htm(←ここに設置したい) メインページ:1.htm 2.htm 3.htm 4.htm  と入っている感じです。 左フレーム↓ <script language="JavaScript"><!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --></script> <form name="myForm"> <select name="myMenu" onChange="myGo()"> <option value="1.htm" >第1章 <option value="2.htm" >第2章 <option value="3.htm" >第3章 <option value="4.htm" >第4章 </select> </form> どこをどう直したらいいのか、是非お教え下さい。 よろしくお願いします。

その他の回答 (1)

  • 回答No.1

こんにちは onChangeの際についでにvalue値も渡してやればいいですよ(^^) <script language="JavaScript"> <!-- function MENU(URL){ location.href = URL; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU(this.value)"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU(this.value)"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答ありがとうございます。 すいません、質問内容が間違っていました。 再度内容を書き換えて質問させて頂きますので宜しくお願い致します。

関連するQ&A

  • 新しい窓を開く記述がblankで上手くいかないです。

    <!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; top.MainFrame.location.href = document.myForm.myMenu.options[mySelect].value; } // --> 上のJavaScriptで、下のformで選択されたページをMainFrameに表示しています。 今回、選択したページを新しい窓で表示したいのですが、locationの 前にblankを書き加えても飛びません。 どの様に記述すればいいのでしょうか?ご指導よろしくお願いします。 <FORM name="myForm"> <select name="myMenu" onChange="myGo()"> <OPTION value="http://---1">◆1 <OPTION value="http://---2">◆2 <OPTION value="http://---3">◆3 </SELECT> </FORM>

  • プルダウンメニューのボタンの色を変えるには?

    自分のHPにプルダウンメニューにて曲を選択し、BGMが流れるようにしています。曲を流すことには、著作権等を含め問題ありません。 HPは、白と青を基調とした爽やかな感じにするため、スクロールバーも、バー自体は白、バーの枠とボタンの三角印のみ青に変更しています。 しかし、プルダウンメニューのボタンは通常のグレーに黒の三角です。 コレの色を変える方法、ありますか? タグはまずスクロールバーの色変更は、 <style type=text/css> <!-- body{ scrollbar-face-color:FFFFFF; scrollbar-highlight-color:FFFFFF; scrollbar-shadow-color:3333FF; scrollbar-3dlight-color:3333FF; scrollbar-arrow-color:3333FF; scrollbar-track-color:FFFFFF; scrollbar-darkshadow-color:FFFFFF; } --> </STYLE> 曲を流すタグは、 <SCRIPT language="JavaScript"><!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; if (mySelect == 0) return; myHTML = "bgm.html"; // myTitle = document.myForm.myMenu.options[mySelect].text; myFile = document.myForm.myMenu.options[mySelect].value; myURL = myHTML+"?title="+escape(myTitle)+"&file="+escape(myFile); window.open(myURL , "bgm" , "width=210,height=160"); } // --></SCRIPT> プルダウンメニューを置く場所に <FORM name="myForm"> <SELECT name="myMenu" size="1" onchange="myGo()"> <OPTION value="">BGM</OPTION> <OPTION value="song1.mp3">1曲目</OPTION> <OPTION value="song2.mp3">2曲目</OPTION> <OPTION value="song3.mp3">3曲目</OPTION> </SELECT> </FORM> としています。 ご存知の方、よろしくお願いします。

    • ベストアンサー
    • HTML
  • 複数のプルダウンメニューの設置(左右フレーム)

    前回プルダウンメニューによる左右フレーム切り替えの質問をさせていただきました。 →http://oshiete1.goo.ne.jp/kotaeru.php3?q=1200405 申し訳ないですが、ここからまた新たに質問させてください。 上部(固定)、左フレーム(プルダウン設置)、右フレーム(メインページ)というページを作っています。 現在の状況はローカルのフォルダの中に ○上フレーム:flame1.htm(完成) ○左フレーム:flame2.htm(←ここに設置したい) ○右メインページ:1.htm 2.htm 3.htm(←1つ目プルダウン)4.htm 5.htm 6.htm(←2つ目のプルダウン) 7.htm 8.htm 9.htm(←3つ目のプルダウン)  と入っている感じです。 <HEAD>~<HEAD>部分 <script language="JavaScript"><!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; parent.main.location.href = document.myForm.myMenu.options[mySelect].value; } // --></script> <BODY>~<BODY>部分 <form name="myForm"> <select name="myMenu" onChange="myGo()"> <option value="1.htm" >第1章 <option value="2.htm" >第2章 <option value="3.htm" >第3章 </select> </form> ↑上記でひとつのプルダウンは設置できるのですが、 2つ目、3つ目のプルダウンの設置となると、 どこをどうしたらよいやらわかりません。 是非ご回答よろしくお願いいたします。

  • HP上で流す音楽の音量を調節するには?

    自分のHPでBGMを流しています。 mp3・wavファイルなどで著作権の問題はありません。 BGM聞きたくない人のためにプルダウンメニューにて曲を選択すると小窓が出て自動演奏。小窓を閉じると演奏停止するようにしてます。 プレーヤーは表示させずに隠しています。 しかし、別々のところから音を借りてきたからか、曲によって初期の音量に違いがあります。 例えば、1曲目が音が小さいからスピーカーの音量を上げて、続けて2曲目を聴くと音が大きすぎる…このような感じです。 1曲ごとに初期の音量を+-設定する方法はありますか? 以下がタグです。 まず<HEAD>~</HEAD>に <SCRIPT language="JavaScript"><!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; if (mySelect == 0) return; myHTML = "bgm.html"; myTitle = document.myForm.myMenu.options[mySelect].text; myFile = document.myForm.myMenu.options[mySelect].value; myURL = myHTML+"?title="+escape(myTitle)+"&file="+escape(myFile); window.open(myURL , "bgm" , "width=210,height=160"); } // --></SCRIPT> プルダウンメニューの場所に、 <FORM name="myForm"> <SELECT name="myMenu" size="1" onchange="myGo()"> <OPTION value="">○○BGM○○</OPTION> <OPTION value="sound1.mp3">1曲目</OPTION> <OPTION value="sound2.mp3">2曲目</OPTION> <OPTION value="sound3.wav">3曲目</OPTION> </SELECT> </FORM> 小窓はbgm.htmlとし、JAVAスクリプトで共通にしてあります。 具体的には、 http://www.red.oit-net.jp/tatsuya/java/bgm3.htm こちらを参考にしました。 ご存知の方、よろしくお願いします。

    • ベストアンサー
    • HTML
  • プルダウンメニューのターゲット指定

    タイトルどおりなのですが、プルダウンメニュー のリンク先を同ページ内のiframeにしたいのですが これはどうすればできるのでしょうか? こちらに現在の状況を載せておきます。 <SCRIPT LANGUAGE="JavaScript"><!-- function Jump() { tu = document.f.elements['jumpto'].options[document.f.elements['jumpto'].selectedIndex].value if( tu != '-' ) { location.href = tu; } else { alert('移動先を選択して下さい。'); } } // --></SCRIPT> <FORM NAME="f"> <SELECT NAME="jumpto" onChange="Jump();">> <OPTION VALUE="-" SELECTED>移動先を選択</OPTION> <OPTION VALUE="menu1.htm" target="menu">Page1</OPTION> <OPTION VALUE="menu2.htm" target="menu">Page2</OPTION> </SELECT> </FORM> よろしくお願い致します。

  • 同一ページに複数のプルダウンメニュー

    同一ページに複数のプルダウンメニューをつけたいのですが、 どうすればよいのでしょうか。 下記のように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> よろしくお願いします。

  • 複数のプルダウンメニューから指定フレームへ表示

    質問内容を検索してhttp://omedeta.okweb.jp/kotaeru.php3?q=1205107 から抜粋させていただきました。 funfun31様、ご回答された方々、まこと申し訳ございません。 ありがとうございます。 現状、上部(固定)、左フレーム(プルダウン設置)、 右フレーム上(表のサンプル表示)、 右フレーム下(メインページ) というページの構成でfunfun31様とほとんど同じです。 上フレーム(完成) 左フレーム(↓のJavaScriptを設置) 右フレーム上(右フレーム下へ表示する表の見方) 右フレーム下(ここにプルダウンメニューで選択した内容表示) 左フレームの内容 <HTML> <HEAD> <script kanguage=Javascript"> <!-- function myGo(myPullDown) {   var mySelect = myPullDown.selectedIndex;   parent.右フレーム下ファイル名.location.href = myPullDown.options[mySelect].value; </script> <body background="壁紙"> <form name="myForm"> 題名1<br> <select name="myMenu1" onChange="myGo(this)"> <option selected>選択 <option value="01.htm">01 <option value="02.htm">02 <option value="03.htm">03 </select> <br> 題名2<br> <select name="myMenu2" onChange="myGo(this)"> <option selected>選択 <option value="04.htm">04 <option value="05.htm">05 <option value="06.htm">06 </select> </form> </body> </html> どこが間違っているのかがわかりません。 現状選択しても右フレーム下に反応がありません。 知識不足で単純な見落とし、または根本的な間違いがあるかも知れません。 無知でまこと申し訳ございませんが 是非ご回答よろしくお願いいたします。

  • プルダウンから移動時のフレームの外し方

    こんにちわ。 今、上にプルダウンメニューがあり、下にリンク先ファイルを 表示する、上下のフレームページを作ってます。 この時、TOPページ(フレーム無し)やレンタルBBSの ページにも行けるようにしたいのですが、 上のフレームが残ってしまい、困ってます。 アドレスを記入する場所に target="top" と付け加えてみたけれど 上のフレームは残ったままです。 サンプルのscriptで【top.sita.location.href 】と 指定してるから、下のフレームにしか対応しないのでしょうか? 何処かを変更して、TOPやBBSに移動する時だけ フレームを無くし、全画面表示する方法はないでしょうか? ご存知の方、いらっしゃいましたら宜しくお願いしますm(__)m <SCRIPT language="JavaScript"> <!-- function myGo(){mySelect = document.myForm.myMenu.selectedIndex; top.sita.location.href = document.myForm.myMenu.options[mySelect].value; }// --></SCRIPT> <select name="myMenu"> <OPTION value="http://www.***">TOP <OPTION value="http://www.***">うさぎ <OPTION value="http://www.***">ねこ <OPTION value="http://www.***" target="top">BBS                     ↑ココに入れました </select> <input type="button" value="GO!" onClick="myGo()"> </form>

  • 複数のプルダウンメニューの表示について

    複数のプルダウンメニューについてですが、 以前、こちらで教えてもらったことを応用したいのです。 フォーームの中の「グループ1」と「グループ2」という大分類は文字の表示だけでリンクしないようにしたいのです。 この状態だと、「グループ1」という名前もプルダウンの中に入ってしまって、 ファイルがないので、リンクエラーの警告がでます。 どこが間違っていて、 どのように変えたらいいのでしょうか。 よろしくお願い致します。 <script language="javascript"> <!-- var s; function reSel(c) { if(s&&(s!=c)) s.options[0].selected=true; s=c; } function A_Li() {   Sel=document.Link1.OP.selectedIndex;   Ms=document.Link1.OP.options[Sel].value;   parent.main.location.href=Ms; reSel(document.Link1.OP); } function B_Li() {   Sel=document.Link1.OP2.selectedIndex;   Ms=document.Link1.OP2.options[Sel].value;   parent.main.location.href=Ms; reSel(document.Link1.OP2); } // --> </script> ---------------HTML------------ <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="-" SELECTED>グールプ1</option> <option value="1.htm">あ</option> <OPTION Value="2.htm">い</option> <OPTION Value="3.htm">う</option> <OPTION Value="4.htm">え</option> <OPTION Value="5.htm">お</option> </SELECT> <SELECT name="OP2" onChange="B_Li()" size="1"> <OPTION Value="-" SELECTED>グールプ2</option> <option value="6.htm">か</option> <OPTION Value="7.htm">き </option> <OPTION Value="8.htm">く </option> </SELECT>

  • このJavaScriptはなんか早い・・・

    <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイマー</TITLE> </head> <body> <script language="JavaScript"><!-- myCnt = 0; myTim = 0; function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; myCnt = eval(document.myForm.myMenu.options[mySelect].value); myTim = setInterval("myTimer()",1000); } function myTimer(){ myCnt = myCnt-1; document.myForm.myFormSec.value = myCnt + " 秒"; if (myCnt == 0){ clearInterval(myTim); alert("制限時間を終了しました。"); } } // --></script> <CENTER> <form name="myForm"><select name="myMenu" size="1"> <option value="180">時間制限は? </option> <option value="600">10分 </option> <option value="300">5分 </option> </select> <input type="button" value="GO!" onclick="myGo()">                            あと<input type="text" size="15" name="myFormSec"> です。</form> </CENTER> <form> <center><input type="button" value="閉じる" onclick="window.close()"> </center> </form> </body> </html> 上のものを実行させると、なぜかスピードが早くなってしまいます。 どうすればいいのでしょう。 お願いします。