プルダウンメニューの設定の間違いを指摘
- 質問者は、プルダウンメニューを2つ設定したいが、どこが間違っているか知りたいという内容です。
- 質問者が作成したコードでは、セレクタ名が重複しており、機能しない可能性があると指摘しています。
- セレクトボックスのオプション値と条件式の値が一致しない場合に、出力するテキストを変える処理が実装されています。
- ベストアンサー
プルダウンのメニューを表示を2つ設定。
プルダウンのメニューを表示を2つ設定したいのですが、 どこが間違っているのでしょうか。 基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。 間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>
- semboku_love
- お礼率4% (43/918)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Q. どこが間違っているのでしょうか。 A. HEAD、BODYタグがダブっています。 修正例 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (value == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // function selectboxChange11() { var value = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (value == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output">-----</div> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11">-----</div> </body> </html>
関連するQ&A
- jsでプルダウンで選択したものがうまく表示されない
以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。 これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。 どうしたら改善されますか。
- ベストアンサー
- JavaScript
- 2個選択することで初めて表示というのができない
<!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (value == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // function selectboxChange11() { var value = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (value == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> ↑はjsの分ですが、 2個選んだら初めてイベントが発生するプログラムを作成しているのですが、 いかんせんうまくいきません。 恐らく、var value = document.forms.form1.Select1.value;のところで、躓いているのだと思います。 document.formsにカンマをつけてみたり、さらに、両端に[]をつけてみたり、いろいろ試しましたが、うまくいきません。 それとも、重ねること自体ができないのでしょうか。 どうしたらいいのでしょうか。
- 締切済み
- JavaScript
- innerhtmlで出た値から、ifで返り値を出す
innerhtmlで出た値から、要素を判断し、if文で返り値を求めることは可能でしょうか。 具体的にはinnerhtmlで、2未満の数値が出た場合、 りんごを、4未満であればみかんと返すようにいたしたいです。 なお、回答が長くなることから、script文のみの記述でOKですが、 script文は省略なさらないでください。 <!--適当--> <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { judge(); } function selectboxChange111() { judge(); } function judge() { /* この場合は、varではなくletを使う。*/ let val101 = document.forms.form101.Select101.value; let val111 = document.forms.form111.Select111.value; /* そもそも両方が当てたら、メッセージを出すのなら、outputは1つでいいのでは？ */ let target = document.getElementById("output201"); let target2 = document.getElementById("output202"); if ((val101 == "要素101")&&(val111 == "要素111")) { target.innerText = "合っています。"; target2.innerText = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output201"></div> <div id="output202"></div> <div id="output203"></div> <div id="output204"></div> <div id="output205"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
- プルダウンを2個選び、その結果に基づき、値を返す。
プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。
- 締切済み
- JavaScript
- 質問Aと質問Bを選択して、メッセージを出したい。
質問Aと質問Bを選択して、メッセージを出すプログラムを作っています。 ところが、functionについて、引数の場合は2つ同時に使用できますけれども、関数はできないのがネックです。 なぜそれが必要かというと、 funcの中にifが入っており、そこで、メッセージの挙動の操作をしているためです。 もし、関数を2つ同時に使うとしたらどのようにしたらいいですか。 以下はそのjavascript文です。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { var val101 = document.forms.form101.Select101.value; var target = document.getElementById("output101"); if (val101 == "要素101") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output101"></div> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output111"></div> </body> </body> </html>
- ベストアンサー
- JavaScript
- セレクトメニューに応じたdivタグの内容
javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>
- ベストアンサー
- JavaScript
- プルダウンメニュー
こんばんは。 日時をプルダウンメニューで選択するのですが、 月が変わると、内容も変わるようにしたいと思っています。JavaScriptで、出来ると聞いたのですが、 やり方が解りません。 このように書いてみたのですが、 画面には何も表示されません。 助けてください。 <SCRIPT LANGUAGE = "JavaScript"> <FORM NAME="form1" METHOD="post"> if (mm = 2){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 </SELECT>日"); } if ((mm = 4) || (mm = 6) || (mm = 9) || (mm = 11)){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 <OPTION VALUE="29">29 <OPTION VALUE="30">30 </SELECT>日"); } else{入らないので省きます。 </FORM> </SCRIPT>
- 締切済み
- JavaScript
- プルダウンメニューからインラインフーム内を操作する
表題のようなものをjavascriptとフォームを使って 用意しましたが、IE6、IE7の環境で試験しましたが問題ありませんでした。 ところが、これをFirefoxで動かすと、プルダウンで選択してもインラインフレームは まったく変化しませんでした。 どちらでも動作するようにしたいのですがどのように改変すればよろしいでしょうか。 初心者でとんでもない間違いをしているかもしれませんが、どうかご教授ください。 現在以下のような記述になっています インラインフレーム名：inpage <!--javascript部 --> <script type="text/"> function jump(){ var url=document.form1.select1.options[form1.select1.selectedIndex].value; if (url!="") document.inpage.location.href = url; } </script> <!--javascript部 --> <!--フォーム部 --> <FORM NAME="form1"> <SELECT NAME="select1" onChange="jump()"> <option value="">選択してください <option value="AAAAA.html">AAAAA <option value="BBBBB.html">BBBBB <option value="CCCCC.html">CCCCC </SELECT> </FORM> <!--フォーム部 -->
- 締切済み
- JavaScript
- セレクトメニューのリンク先を隣のフレームに表示したい。
左側の細いフレームにセレクトメニューを設置しました。 メニューを選んで、go!をクリックして、リンクするときメインのフレームに開くようにしたいのですが・・・。 ターゲットはどこに記述すればよいですか？ お忙しいところ申し訳ありませんが、教えてください。 よろしくお願いします。 ＊head部分の記述 <SCRIPT LANGUAGE="JavaScript"> <!-- function gotoURL(){ var gotoUrl=document.f0.f0e0.options[document.f0.f0e0.selectedIndex].value document.location.href=gotoUrl｝ //--> </SCRIPT> ＊body部分の記述 <FORM NAME="f0"> <div align="center"> <SELECT NAME="f0e0"> <option value="../kensaku/chikukensaku.html" selected>宮崎市</option> <option value="no">延岡市</option> <option value="mj">都城市</option> <option value="kb">小林市</option> <option value="gb">郡部</option> </SELECT> <INPUT TYPE=BUTTON VALUE="GO!" onClick="gotoURL()"> </div> </FORM>
- 締切済み
- JavaScript
- プルダウンメニューのリンクで別ウインドウを開く
下記のようなプルダウンメニューを作成したのですが、同じウインドウ内でリンクするのではなく別ウインドウで開くようにするにはどこを変更すればよいのでしょうか？ head内>>>>>>>>>>>>> <script language="JavaScript" type="text/JavaScript"> <!-- function gotoURL(formName){ var gotoUrl=document.forms[formName].elements[0].options[document.forms[formName].elements[0].selectedIndex].value document.location.href=gotoUrl } --> </script> body内>>>>>>>>>>>>>> <form name="fm0"> <select name="links"> <option selected>＜ここから選択してください＞</option> <option value="aaa.html">あああ</option> <option value="bbb.html">びびび</option> </select> <input name="BUTTON" TYPE=BUTTON onClick="gotoURL('fm0')" VALUE="GO!"></form>
- ベストアンサー
- グラフィックソフト
お礼
ありがとうございます。 とても参考になりました。