selectメニューの位置をJavaScriptで移動させる方法
- IEやNN4.7では動作するが、NN6ではうまく動かないselectメニューをクリアボタンを使って一番上の「------」まで移動させる方法を教えてください。
- 既に試した方法として、document.JTform.play_l.options[0].defaultSelectedをtrueに設定する方法を試しましたが、効果はありませんでした。
- 他にどのような方法でselectメニューの位置を移動させることができるでしょうか？
- ベストアンサー
selectメニューのselectedの位置をJavaScriptで移動させたい。
selectメニューで困っています。 下のようなselectメニューをクリアボタンを使って一番上の「------」まで移動させたいのです。 IEやNN4.7はきっちり動くのですが、NN6.2で上手く動きません。 NN6だけは、かたくなに「ゲームで」に戻ろうとします。 「ここ」と書いた所を document.JTform.play_l.options[0].defaultSelected="true"; document.JTform.play_l.options[1].defaultSelected="false"; document.JTform.play_l.options[2].defaultSelected="false"; document.JTform.play_l.options[3].defaultSelected="false"; に増やしてみたのですが、変わらないみたいでした。 なにか他に良い方法はないでしょうか？ <html> <Script Langage="JavaScript"> function init_func() { document.JTform.play_l.selectedIndex=0; document.JTform.play_l.options[0].defaultSelected="true";<!--ここ--> document.JTform.play_l.index=0; } </Script> <form name="JTform"> <select name="play_l"> <option value="">--------------------</option> <option value="1">犬と</opne> <option value="2">ラジコンで</opne> <option value="3" selected>ゲームで</opne> </select> <INPUT TYPE="submit" VALUE="さあ、遊ぼう"> <INPUT TYPE="reset" VALUE="クリア" Onclick="init_func()"> </form> </html>
- _mini_
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
恐らく、リセットボタンの本来の機能が init_func() 実行後に働き、「ゲームで」に戻ってしまうのでしょう。 init_func関数の最後に return false; を追加し、onClick の部分も onClick="return init_func()" としてみて下さい。 もしこれで直らない場合、type="reset" ではなく type="button" に変えるしかなさそうです。 また、init_func関数の方は、 document.JTform.play_l.selectedIndex=0; だけで良いでしょう。 document.JTform.play_l.options[0].defaultSelected="true"; の defaultSelected というプロパティは 初期状態で選択されている OPTIONタグのみ true となる ReadOnly 属性なので、値の代入は無効のはずです。 （ちなみに、true は "" で囲まなくてＯＫです。） 同じく、 document.JTform.play_l.index=0; これも不要です。 （indexなんて属性あったかな・・？）
関連するQ&A
- Javascriptでセレクトメニューの選択チェックの方法
Javascriptでセレクトメニューのフォームをチェックしたいのですが、 リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=＼"JavaScript＼"> <!-- function Check() { var str = document.form.a.value; if(document.form.a.value == "0") { alert("番号を選択して下さい"); } //--> </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>
- ベストアンサー
- JavaScript
- ネスケで動かないjavascriptの調べ方
下記はセレクトボックスを選択させるためのものですが、ＩＥでは動きますが、ＮＮでは動きません。この時に、何かで調べようとするときに、「何」を調べればいいのかさっぱりです。できれば、 １番目に○を調べ、 ２番目に○を調べ、 というような手順についてアドバイスいただけないでしょうか。 <SCRIPT language=JavaScript> function submitCheck(){ for( i=0 ; i<document.main.length ; i++ ){ if(document.main.elements[i].type == "select-one" && document.main.elements[i].value == "err"){ alert("未選択項目があります。"); document.main.elements[i].focus(); return false; } } } </SCRIPT> <FORM NAME=main ACTION="sample.cgi" METHOD="POST" ENCTYPE="application/x-www-form-urlencoded" onSubmit="return submitCheck()"> <SELECT NAME="kubun"><OPTION SELECTED value="err">↓【選択して下さい】</OPTION> <OPTION>りんご</OPTION> <OPTION>みかん</OPTION> </SELECT> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="送信"></form>
- ベストアンサー
- JavaScript
- [java script]NNでnullになる
selectボックスに西暦を表示しています。 このselectボックスを２つ用意して、範囲設定を行っているのですが、 範囲指定大小チェックのロジックを作り、IEでは正しく動作したのですが、 NNだと関数conf()内でdocument.test.FROM_YEAR.valueとdocument.test.TO_YEAR.valueの値をみてみると、nullになっていたためFORM_YEAR>TO_YEARと指定しても範囲指定大小チェックのif文が、必ずfalseになって 処理を続行してしまいます。 なぜ、IEではうまくいくのにNNだとうまくいかないのでしょうか？ これってNNのバグ？？？ ～ソースコード（抜粋）～ <SCRIPT LANGUAGE="JavaScript"> <!-- function conf() { from = document.test.FROM_YEAR.value; to = document.test.TO_YEAR.value; if (from > to) { alert("年の指定に誤りがあります。"); return false; } } //--> </SCRIPT> <FORM NAME='test' ACTION='test.html' METHOD="post" onSubmit="return(conf())"> <SELECT NAME='FROM_YEAR'> <OPTION VALUE='2001'>2001 <OPTION VALUE='2002' SELECTED>2002 <OPTION VALUE='2003'>2003 <OPTION VALUE='2004'>2004 <OPTION VALUE='2005'>2005 <OPTION VALUE='2006'>2006 </SELECT>年 <SELECT NAME='TO_YEAR'> <OPTION VALUE='2001' SELECTED>2001 <OPTION VALUE='2002'>2002 <OPTION VALUE='2003'>2003 <OPTION VALUE='2004'>2004 <OPTION VALUE='2005'>2005 <OPTION VALUE='2006'>2006 </SELECT>年 <INPUT TYPE='SUBMIT' NAME='SUBMIT' VALUE='登録'>
- ベストアンサー
- その他(ソフトウェア)
- DOCTYPE宣言とjavascript
United Statesを選んだ場合、州を選択。 それ以外の国の場合はtextフィールドで県なりを直接書き込む と言うようにしたく、下記の様にページを作成したのですが、 IE、Opera、Safariなど他では全て動作したのですが、 Firefoxのみ動作しませんでした。 但し、DOCTYPE宣言の"http://www.w3.org/TR/html4/loose.dtd" を削除したらFirefoxでも動作しました。 ただ、ここを削除すると全体的にデザインがズレてしまいます。 Firefoxでも動くようにjavascriptの部分を変更すると言う事で解決したいのですが、 良い書き方が解りません。どなたかご教授願えますでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <script type="text/javascript"> function changeField(){ index= test_form.country.value; if (index != "UnitedStates"){ document.getElementById("select1").style.display="inline"; document.getElementById("select1").disabled=false; document.getElementById("select2").style.display="none"; document.getElementById("select2").disabled=true; } else { document.getElementById("select1").style.display="none"; document.getElementById("select1").disabled=true; document.getElementById("select2").style.display="inline"; document.getElementById("select2").disabled=false; } } </script> <form name="test_form"> <select name="country" onChange="changeField()"> <option value="Japan" selected="selected">Japan</option> <option value="UnitedStates">United States</option> </select> <input id="select1" name="state" type="text" size="20" /> <select id="select2" name="state" style="display:none" disabled> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> </select> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptの動作で困ってます。
動作不良が三箇所あります。 プログラムに詳しい方がいらっしゃいましたら原因を教えて下さい。 ・未入力の質問をアラートで一括表示させたいのですが、 （３）のテキストエリアの箇所が未入力なのにアラートに表示できません。 判定のtrueとfalseを逆にして試すと、（３）のアラートは表示されるものの、記入しても アラートが出続けます。 ・１度しか指定していないにも関わらず同じ内容の警告アラートが２回出てしまう原因が分かりません。 ・入力した項目や選択した項目に関しては未入力項目のアラートとは別のアラートを用意してvalueの値をアラートで一括表示させたいのですが、関数を定義しているにも関わらず、関数が定義されていないとエラーメッセージが帰ってきて、表示されません。 ソースコードは以下になります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check(){ var msg = ""; var msg2 = ""; var str = document.form.id.value; var str2 = document.form.pass.value; if (str.match(/[^0-9]+/)) { alert("客番号は数字のみ"); } if (str.length>5) { alert("客番号は4～5桁"); } if(str.length<4){ alert("客番号は4～5桁"); } if(str==""){ msg += "客番号が未入力です。\n"; }else{ msg2 += document.form.id.value; } if(str2==""){ msg += "パスワードが未入力です。\n"; }else{ msg2 += document.form.pass.value; } if(radioCheck()==false){ msg += "(1)が未入力です。\n"; } if(checkboxCheck()==false){ msg += "(2)が未入力です。\n"; } if(textareaCheck()==false){ msg += "(3)が未入力です。\n"; } if(selectCheck()==false){ msg += "(4)が未入力です。\n"; } if(msg != ""){ //メッセージを出力 alert(msg); } if(radioCheck()==true){ msg2 += document.form.eng.value ; } if(checkboxCheck()==true){ msg2 += document.form.lang.value ; } if(txtareaCheck()==true){ msg2 += document.form.opinion.value ; } if(selectCheck()==true){ msg2 += document.form.age.value ; } if(msg2 != ""){ //メッセージを出力 alert(msg2); } } function radioCheck(){ var count = 0; var eng=document.getElementsByName("eng"); for(var i=0;i<eng.length;i++){ if(eng[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function checkboxCheck(){ var count = 0; var checklist=document.getElementsByName("lang[]"); for(var i= 0;i<checklist.length;i++){ if(checklist[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function textareaCheck(){ var textarea=document.getElementById("demand").value; if(textarea!=""){ return true; } else{ return false; } } function selectCheck(){ var selectValue=document.getElementById("age").value; if(selectValue!="選択されていません"){ return true; } else{ return false; } } </script> </head> <body> <form action="http://www" method="post" name="form"onSubmit="return check()"> <h1>アンケート</h1> <p><label>客番号：<input type="text" name="id"></label></p> <p><label>パスワード：<input type="password" name="pass"></label></p> <h2>（１）</h2> <p>食べたいですか？<br> <br> <input type="radio" name="eng" value="yes"> はい <input type="radio" name="eng" value="neither"> どちらでもない <input type="radio" name="eng" value="no"> いいえ </p> <h2>（２）</h2> <p>食べたい物<br> <br> <input type="checkbox" name="lang[]" value="apple"> りんご <input type="checkbox" name="lang[]" value="banana"> バナナ <input type="checkbox" name="lang[]" value="pasta"> パスタ <input type="checkbox" name="lang[]" value="pizza"> ピザ <input type="checkbox" name="lang[]" value="supu"> スープ </p> <h2>（３）</h2> <p>意見（自由記述）<br> <textarea id="demand" name="opinion" cols="40" rows="4" maxlength="20"> </textarea> </p> <h2>（４）</h2> <p> 年齢を選択 <select id="age" name="age"> <option selected value="選択されていません">以下から選択</option> <option value="10～19才">10～19才</option> <option value="20～29才">20～29才</option> <option value="30～39才">30～39才</option> <option value="40～49才">40～49才</option> <option value="50～59才">50～59才</option> <option value="60～69才">60～69才</option> <option value="70才～">70才～</option> </select> </p> <p> <input type="submit" name="button" value="送信" onclick="check();"> <input type="reset" value="クリア"> </p> </body> </form> </html>
- 締切済み
- JavaScript
- JavaScriptでの足し算処理について
本日よりJavaScriptに取り組んでいますが、いきなり足し算の処理でつまずきました。 下記の様にdeta1に10を入れ、計算ボタンを押すとdeta2に25が入るような処理を行いたいのですが、10が文字として認識されてしまうらしく、deta2が1015になってしまいます。 かなり基本的なことだと思いますが、どうすればよいか教えてください。 <script language="JavaScript"> <!-- function func1(){ document.test.deta2.value=document.test.deta1.value+15; } //--> </script> <form name=test> <INPUT type="text" name="deta1"> <INPUT type=button value="計算" onClick=func1()> <INPUT type="text" name="deta2"> </form>
- ベストアンサー
- JavaScript
- jacascriptとフォームselectメニューで計算した値を保存したい
お世話になります。 javascriptを使った計算を勤め先で必要ということで、社内で少しパソコンに詳しいという理由で自分が手がけることになりましたorz 色々と検索しながら勉強し、ようやく思い通りのプログラムを見つけて参考にしながら実践してみたのですが、思い通りにならない箇所が一部ありまして困っています。 参考にしたのは以下のサイトなのですが、 ttp://www.tagindex.com/javascript/form/comp1b.html セレクトメニューから選んだ値を特定の数値で掛けそれを合計するという流れなのですが、このスクリプトだと、一度計算を終えると、もう一度セレクトメニューから値を選択しないと値が０になってしまっているのです。 希望としては、この選択した値を保存しておき、計算が終わってもそれ以前の選択状況のままにしておきたいんですが、どうやればできるでしょうか？ <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- ドコモのSELECTタグ
ドコモのXHTMLのサイトを作っていますが、 １ページ内のSELECTタグの上限はありますでしょうか？ SA700iでは１５個しか表示されませんでした。 また、これは端末毎に違ってくるのでしょうか？ --------------------------------------------- <form> <select name=test1><option value=1></select> <select name=test2><option value=1></select> <select name=test3><option value=1></select> ・ ・ ・ <select name=testn><option value=1></select> </form> --------------------------------------------- 宜しくお願いします。
- ベストアンサー
- HTML
- Javascriptでselectボックス項目削除
いつも参考にさせていただいておりますsasaloと申します。 早速ですが、javascriptで分からないことがありご質問させていただきます。 どなたかお知恵・お分かりになるかたがおりましたらどうぞご教授いただけないでしょうか？ よろしくお願いします。 行いたいことは、htmlページを読み込んだタイミングでselectボックスの最後の廃番商品の項目を1つだけ削除したく思います。 最後の項目ということになります。 ソースコードは、簡潔に書かせていただきました。 ソースコードは、 <form action="search.php" method="get" name="form"> <select name="situation"> <option value=""></option> <option value="販売中">販売中</option> <option value="在庫切れ">在庫切れ</option> <option value="廃番商品">廃番商品</option> </select> </form> システムを使用しておりまして、変数をhtmlに挿入すると自動的にselectボックスが表示されるようになります。 検索に使用しておりまして、廃番商品の検索は利用しないのでjavascriptにて削除できたらと思います。 いろいろと調べたのですが、inputボタンを押したら消せるなどの情報はありましたがちょっと使用方法がちがいまして・・・。 誠にお手数ですみませんがどなたかお分かりになられる方がおりましたらソースコードをご教授いただけないでしょうか？ また、簡単でももちろんかまいませんのでソースコードのご説明をいただけないでしょうか？ どうぞよろしくお願いします。 from sasalo
- ベストアンサー
- JavaScript
- HTML内の指定の位置にプルダウンを読み込みたい
まずラジオボタンがあって、 選択するとfunctionに格納してあるプルダウンを ラジオボタンの下の指定した箇所に表示させたいです。 ラジオボタンを変更すると、プルダウンも変わるようにしたいです。 教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"><!-- function pulldown1(){ document.write('<select name="AAA" size="1">'); document.write('<option value="1-1" selected>1-1</option>'); document.write('<option value="1-2">1-2</option>'); document.write('</select>'); } function pulldown2(){ document.write('<select name="BBB" size="1">'); document.write('<option value="2-1" selected>2-1</option>'); document.write('<option value="2-2">2-2</option>'); document.write('</select>'); } //--></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ１ <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ２ </FORM></BODY> </HTML>
- ベストアンサー
- JavaScript
お礼
問題解決いたしました。文法の間違いまで大変助かりました。 ボタンのTypeはResetのままでも、大丈夫なようです。 ありがとうございました。