選択ボックスの並び換え方法について
- 選択ボックス内の並び換え方法として、JavaScriptを使用することができます。
- 具体的な方法は、JavaScriptで初期値に戻す処理を実装し、選択ボックスのデータの並びとテキスト表示を初期値に設定することです。
- JavaScriptの処理は、ボタンが押されたときに実行され、選択ボックスのデータの並びを初期値の状態にし、テキスト表示部分には初期値を表示します。
- ベストアンサー
選択ボックス内の並び換えをしたい。
まずは、下のＨＴＭＬをご覧ください。 ------------------------------------------------- <HTML> <HEAD><TITLE>TEST</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function defaultSet() { // ここで初期値(ITEM01)に戻す処理。 } //--> </SCRIPT> </HEAD> <BODY> <FORM NAME="FR01"> <SELECT NAME="p_youto" SIZE="1"> <option>ITEM01</option> <option>ITEM02</option> <option>ITEM03</option> <option>ITEM04</option> <option>ITEM05</option> <option>ITEM06</option> <option>ITEM07</option> </SELECT><INPUT TYPE="BUTTON" NAME="B1" VALUE="初期値に設定" ONCLICK="defaultSet()"> </FORM> </BODY> </HTML> ------------------------------------------------- このＨＴＭＬファイルを起動しますと、選択ボックスとボタンが 表示されます。そしてボタンを押されたときに、JavaScriptの処理で データの並び＆表示を初期値の状態(一番上がITEM01で、一番下が ITEM02)にし、なおかつテキスト表示される部分には"ITEM01"を表示するようにしたいのですが、 JAVASCRIPTをどのように処理させればよろしいでしょうか？
- yo-he
- お礼率35% (34/97)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まず、「テキスト表示される部分には"ITEM01"を表示する」には、 function defaultSet() { // ここで初期値(ITEM01)に戻す処理。 document.FR01.p_youto.selectedIndex = 0; } でいけます。 問題は「データの並び＆表示を初期値の状態(一番上がITEM01で、一番下がITEM02)にし」と言う部分ですが、「一番下がITEM07」のタイプミスと判断してよいでしょうか。selectは何か項目を選択しても並び順が変わるわけではないので、何も考えなくてよいのではないでしょうか。
関連するQ&A
- フォーカスの移動
どうしてもわからないので、教えて下さい。 下の option ボタンのいずれかを選択した際に、 自動的にテキストボックスにフォーカスが移るような スクリプトを書きたいのですが、 スクリプトの内容と、htmlにへの組み込み方を どのように実装してよいかわかりません。 ------------------------------------- <html> <title></title> <head> <script language="JavaScript"> //フォカース移動 function moveFocus() { //？？？？ } </script> </head> <body> <form name="myForm"> <select name="mySelect"> <option name="op1">test1</option> <option name="op2">test2</option> </select> <input type="text" name="myText"></input> </form> </body> </html>
- ベストアンサー
- JavaScript
- リストボックスで指定されたデータの取得
リストボックスに幾つかのデータ(アイテム)を選択した後、 あるボタンを押したら、メッセージボックスを出力し、選択された データ(アイテム)を表示したいのですが、ｽｸﾘﾌﾟﾄではどのように 記述すればよろしいのでしょうか？ サンプルは以下の通りです。 <html> <head></head> <SCRIPT LANGUAGE="JavaScript"> <!-- function MODORU( ) { alert(この部分をどう記述したらよろしいのでしょうか？); window.close( ); } //--> </SCRIPT> <body> <form name="fr01"> <table border="0"> <tr> <td> <select size="5" name="D1"> <option>標準</option> <option selected>端子箱右</option> <option>端子箱上</option> <option>両軸</option> <option> </option> </select> </td> </tr> </table> <INPUT ONCLICK="MODORU()" TYPE="button" VALUE="転写" name="B3"> </form> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- ドキュメントを自ウィンドウに書き出したい
<html> <head> <script language="JavaScript"> <!-- function doc() { document.write("JavaScript"); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1"> <input type="button" value="ボタン" onClick="doc()"> </form> </body> </html> 上のプログラムの場合ボタンを押すとボタンが消えJavaScriptと書き出されてしまうのですが、ボタンの下に書き出すにはどうしたらよいのでしょうか？結果として以下のように表示させたいのですがどうしたらよいのでしょうか？ <html> <head> </head> <body bgcolor="#ffffff"> <form name="form1"> <input type="button" value="ボタン"> <p>JavaScript</p> </form> </body> </html> これらのプログラムは自作のものです。
- ベストアンサー
- JavaScript
- オブジェクトが存在しない
というエラーが次のｈｔｍｌファイルをブラウザで表示させようとするとでます if(document.form0.title!=null) で判断しているだけでだめみたいです そしたらdocument.form0.titleが存在するかどうかをエラーなしで判断させる方法はあるのでしょうか? <HTML> <HEAD> <script type='text/javascript'> <!-- function FormFocus() { if(document.form0.title!=null)document.form0.title.focus(); } // --> </script> </HEAD> <body onload='javascript:FormFocus()'> <form name='form0'></form> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 【FireFox】サブウィンドウ表示とテキストボックス値
メインのウィンドウにテキストボックスとボタンがあり、 ボタンをクリックするとjavascriptによりサブウィンドウ が開くHTMLがあります。 しかし、FireFoxに限り、ボタンを押してサブウィンドウ を開くとメインのHTMLのテキストボックスに入力していた 値が消えてしまいます。 ================ main.html ===================== <html> <head> <script Language="JavaScript"><!-- function openSubWin(){ window.open("sub.html","window","width=300,height=300"); } // --></script> </head> <body> <form action="#" name="myform"> <input type="text" name="no"> <button id="button1" onclick="openSubWin();" >サブウィンドウ</button> </form> </body> </html> ================== サブウィンドウ ================ <html> <body> サブウィンドウ </body> </html> IEでは問題ありませんでした。 何か解決方法はありますでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- セレクトボックスの値で分岐処理をしたい
こんにちは。スクリプト初心者です。 現在セレクトボックスの、インデックス値を取得し、 それによっての分岐処理をしたいと考えています。 <html><head></head> <body> <form> <select name="1"> <option>選択できます。 <option>選択肢1 <option>選択肢2 </select> </form> </body></html> とあり、これに、 option「選択１」なら、PG1プロシージャを呼ぶ 同様 「選択2」なら、PG2プロシージャを呼ぶ としたい時、どのようにコーディングすれば よいのでしょうか。 サイトで調べたものの、 JavaScriptでの インデックス値の取得がわかりません。 宜しくお願いいたします。
- 締切済み
- JavaScript
- テキストボックスにスクロールする文字列を表示する。
テキストボックスにスクロールする文字列を表示する方法を知りました。^^ これはできたのですが、同じページで、「★メッセージ1」の他に 「別の表示」をさせたいのですがどうしたらいいんでしょうか? 例えば、「★メッセージ2」。など <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- msg="★メッセージ1 "; function scroll(){ msg=msg.substring(1,msg.length)+msg.substring(0,1); document.myform.mytext.value=msg; setTimeout("scroll()",300); } //--> </SCRIPT> </HEAD> <BODY onLoad="scroll()"> <CENTER> <FORM name="myform"> <INPUT name="mytext" size="20"> </FORM> </CENTER> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 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
- 自分のIEでは計算が行われません。
昨日も質問させてもらったのですが、また困ったことが起きました。 下のHTMLをIEで表示させてみたのですが、友人の環境ではコンボボックスの数字を変えることによって計算されるのですが、私の環境では計算が行われません。 何が原因なのでしょうか？ <html> <head> <title> プログラミング基礎 </title> <script language ="JavaScript"> <!-- function calc(amount){ document.mugcup.total.value = 498 * eval(amount); }//--> </script> </head> <body> <form name=mugcup> マグカップ（１個 税込498円:お一人様限定5個まで）<br> <hr> 個数: <select name ="num" onchange = "javascript:calc(this.value)"> <option value =0>0 <option value =1>1 <option value =2>2 <option value =3>3 <option value =4>4 <option value =5>5 </select> 小計: <input type="text" size="8" name="total">円<br> <hr> </form> </body> </html>
- 締切済み
- HTML
- 同じwindowの別formにURLを表示したい
はじめまして。 ボタンをクリックしたら、ボタンの下の領域に指定したURLの内容を表示したいのですが、希望した動作にならず困っています。 具体的には下のソースのように form を２つ作成し、"F1" に表示されているボタンをクリックされたら、"F2" にURLの内容が表示されたらいいなぁと考えています。 初めて HTML を触っているもので、考えられない変な事をしているかもしれませんが、何かヒントでも教えていただけると、大変うれしく思います。 よろしくお願いいたします。 ＜環境＞ OS：winXP pro ブラウザ：IE6 sp1 <html> <head> <script type="text/javascript"> <!-- function onClick_B1(){ window.open("http://www.goo.ne.jp/","F2"); } // --> </script> </head> <body> <form name="F1"> <input type="button" name="B1" value="Go" onClick="onClick_B1()"> <hr> </form> <form name="F2"> </form> </body> </html>
- ベストアンサー
- HTML
お礼
そうですね。確かに並び順は関係ないようでした。 自分でもselectIndexで試したところ、テキスト部分が 正常に表示されました。ありがとうございました。