- ベストアンサー
セレクトボックスの値取得に関して
こんにちは。今、セレクトボックスの値取得に頭を悩ませています。 具体的には、（送迎バスの）到着時間、出発時間を入力してもらい、 到着時間が出発時間より早くないとアラートを出すような仕掛けを 作りたく思っています。以下のようなスクリプトを作ったのですが、 時間の計算がうまくいかないみたいです。至らぬ点など多々あるかと 思いますが、ご教授よろしくお願いいたします。 <html> <head><title>select_test</title> <script type="text/javascript"> function jikoku_chk(){ //到着時刻 arrive_time=eval(document.getElementsByName("HH1").selectedindex)*60+eval(document.getElementsByName("MM1").selectedindex); //出発時刻 depart_time=eval(document.getElementsByName("HH2").selectedindex)*60+eval(document.getElementsByName("MM2").selectedindex); if (arrive_time > depart_time){ alert("出発時刻は到着時刻以降でなければなりません"); }else{ alert("入力内容は適切です"); } </script> </head> <body> <form name="s_box" action="./select_test.html" onsubmit="jikoku_chk()"> 到着時間 <select name="HH1"> <option>00 <option>01 <option>02 </select> : <select name="MM1"> <option>00 <option>01 <option>02 </select> <br><br> 出発時間 <select name="HH2"> <option>00 <option>01 <option>02 </select> : <select name="MM2"> <option>00 <option>01 <option>02 </select> <br> <input type="submit" value="登録"> </form> </body> </html>
- sirius2003
- お礼率32% (71/221)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 HH[1]やMM[1]はjavascriptで配列を表す表記法です。 ちゃんと確認してはいませんが、これをevalで評価しようとしているので、配列値として評価しようとされるかあるいは構文エラーなどになっている可能性が高いと思われます。 eval(document.s_box）は評価されますが、eval(document.s_box.HH[1]）は評価されないことをご確認ください。 もとのご質問では要素の指定にgetElementsByName()を使用していたのに、なぜこのように変えてしまったのでしょう？ ＞javascriptの中でfor文でまわして、一行ずつ処理を行いたいので ＞すが、このような方法は難しいのでしょうか？ 対象が2個しかないので、配列にしてもかえって複雑になるだけのような気もしますが…（数がたくさんあれば別ですが） 例えば、 var select_name = ['HH[1]','MM[1]','HH[2]','MM[2]']; とでもしておいて（もちろんループ内で名前を自動生成しても可） for (var i=0; i<4; i++) alert(document.getElementsByName(select_name[i])[0].selectedIndex); または、 for (var i=0; i<4; i++) alert(document.forms['s_box'].elements[select_name[i]].selectedIndex); のようにすると、セレクターのインデックス値が順に表示されます。 あるいは、nameに頼らずフォーム内のセレクタを順にみてゆくなら var sel = document.forms['s_box'].getElementsByTagName('SELECT'); for (var i=0; i<sel.length; i++) alert(sel[i].selectedIndex); だけでも同様の結果が得られます。 ついでに、 selectedIndexの値は文字列ではなく、数値であることがわかっていますので、evalは必要無くそのままで計算可能です。 value値などを使用する場合は、確かに文字列として扱われる可能性があるのですが、その場合でもparseInt()などを利用なさったほうがよろしいかと…
その他の回答 (2)
- red-seal
- ベストアンサー率50% (1/2)
こんな感じでどうでしょう <html> <head><title>select_test</title> <script type="text/javascript"> function jikoku_chk(){ //到着時刻 var arrive_hour = document.getElementById("HH1"); var arrive_minutes = document.getElementById("MM1"); var arrive_time = (parseInt(arrive_hour.options[arrive_hour.selectedIndex].text) * 60) + parseInt(arrive_minutes.options[arrive_minutes.selectedIndex].text); //出発時刻 var depart_hour = document.getElementById("HH2"); var depart_minutes = document.getElementById("MM2"); var depart_time = (parseInt(depart_hour.options[depart_hour.selectedIndex].text) * 60) + parseInt(depart_minutes.options[depart_minutes.selectedIndex].text); alert(arrive_time); alert(depart_time); if (arrive_time > depart_time){ alert("出発時刻は到着時刻以降でなければなりません"); return false; }else{ alert("入力内容は適切です"); return true; } } </script> </head> <body> <form name="s_box" action="./select_test.html"> 到着時間 <select id="HH1"> <option>00</option> <option>01</option> <option>02</option> </select> : <select id="MM1"> <option>00</option> <option>01</option> <option>02</option> </select> <br><br> 出発時間 <select id="HH2"> <option>00</option> <option>01</option> <option>02</option> </select> : <select id="MM2"> <option>00</option> <option>01</option> <option>02</option> </select> <br> <input type="submit" value="登録" onclick="javascript:return jikoku_chk();"> </form> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
取得値をさかのぼってチェックしていってみるとわかると思いますが、ご提示のコードだと値を取れていません。 document.getElementsByName（）で得られるのは単一要素ではなく配列ですので、直接配列のプロパティなどを取得しようとしても… selectedindex → selectedIndex ご提示の場合はindexと実際の値が一致するのでindex値で計算してもＯＫのようですが、通常は一致しないので、index値からvalueを参照することが多いと思います。 あと、スクリプトのfunctionの全体の閉じ「}」が抜けているみたい。
お礼
ご回答ありがとうござました。 下記のとおり、作成しましたところ、正常動作が確認できました。 -------------------- function jikoku_chk(){ //到着時刻 arrive_time=eval(document.s_box.HH1.selectedIndex)*60+eval(document.s_box.MM1.selectedIndex); alert(arrive_time); //出発時刻 depart_time=eval(document.s_box.HH2.selectedIndex)*60+eval(document.s_box.MM2.selectedIndex); alert(depart_time); if (arrive_time > depart_time){ alert("出発時刻は到着時刻以降でなければなりません"); }else{ alert("入力内容は適切です"); } } -------------------- 追加で質問で恐縮ですが、SelectのnameをHH[1],MM[1],HH[2],MM[2]等とし、javascriptの部分を、以下のようにしたら、動かなくなりました。 function jikoku_chk(){ //到着時刻 arrive_time=eval(document.s_box.HH[1].selectedIndex)*60+eval(document.s_box.MM[1].selectedIndex); alert(arrive_time); //出発時刻 depart_time=eval(document.s_box.HH[2].selectedIndex)*60+eval(document.s_box.MM[2].selectedIndex); alert(depart_time); if (arrive_time > depart_time){ alert("出発時刻は到着時刻以降でなければなりません"); }else{ alert("入力内容は適切です"); } } ------------------ 本番環境では、チェックする行が多いので、Select文を上記のように配列風にPHPで自動生成し、javascriptの中でfor文でまわして、一行ずつ処理を行いたいのですが、このような方法は難しいのでしょうか？