- ベストアンサー
Operaでselect要素のoption設定が問題？
- IEやFirefoxでは意図したとおりに表示されるのに，Operaで表示したときだけ，よけいな空白のoptionが表示されて困っています。
- select要素に時刻のoptionを設定しましたが，selectedの設定をしようとするとよけいな空白optionが挿入されます。
- Operaが，「 options[i].selected 」の仕様で，IEやFirefoxと違う点があるのでしょうか？いったい何が原因なのでしょうか？よろしく御指導ください。お願いします。
- emikouji
- お礼率53% (130/243)
- JavaScript
- 回答数10
- ありがとう数5
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
http://www.tagindex.com/kakolog/q4bbs/401/607.html Opera側に問題ありそう？ 追記 //@cc_on //@if(1) この部分はIEで実行されます //@else@ それ以外で実行 //@end@ 一行なら /*@cc_on @if(1) この部分はIEで実行されます @else@*/それ以外で実行/*@end@*/ 正確には「実行される」という表現はまずいのだろうけど・・・。 「解釈される？」かな。
その他の回答 (9)
さらに追記 ごらんの通り、頭の中で思っていることをまとめて書けない俺！^^; 俺みたいに完成させるまでに、プログラムとずっとにらめっこしなきゃ いけない奴が使う技？！ //@cc_on for(i=1,t=0;i<11;t+=i++)/*@ alert(i) @*/; alert("Total="+t); これは１から１０までの合計を求めるもの。 でも//@cc_on を消すと、alert(i)が実行されない！ つまりデバッグ用として使えるのだ。
@cc_on もでしたね^^; 詳しくは http://msdn.microsoft.com/ja-jp/library/eb0w91wa(VS.80).aspx 簡単にいうと、IEや他のブラウザで処理を別けたいときがあります。 そのときに、使っています。 いったんコメントアウトしているので、他のブラウザからはコメント扱いです まぁ～自分も下手くそなコードばっかり書いているので説明するのもおこがましくて・・・。
これで目的は達成されたのかっ？！ということで。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <form> <p> Start/ <select name="ji0" id="ji0" onChange="setEndTime( this )"></select><br> End/ <select name="ji1" id="ji1"> <option value=''>無効です</option> </select><br> </p> </form> <script type="text/javascript"> //@cc_on var s = 8, e = 16, z = 24; for( var i= s; i< z; i++) document.getElementById( 'ji0' ).add( new Option( sh(i), i, i==s, i==s)/*@if(1) @else @*/, null /*@end@*/); function setEndTime( element ){ var o = document.getElementById('ji1'); while( o.hasChildNodes() ) o.removeChild( o.firstChild ); for( var i= element.value; i<=z; i++ ) o.add( new Option( sh(i), i, i==e, i==e)/*@if(1) @else @*/, null /*@end@*/); } function sh( h ){ return ( (h<12)? '午前'+h: '午後'+(h-12))+'時' } </script>
ごめんね。なんか役に立ちそうにないね;_; しかも、簡潔に書けよ！（自分に）ってことで <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> あ<select name="ji0" id="ji0"></select><br> い<select name="ji1" id="ji1"></select><br> <script type="text/javascript"> //@cc_on for( var i= 8; i< 24; i++){ var op0 = ( (i<12) ? '午前'+i: '午後'+(i-12) )+'時', op1 = i==8, op2 = i==16; document.getElementById( 'ji0' ).add( new Option( op0, op1, op1)/*@if(1) @else @*/, null /*@end@*/); document.getElementById( 'ji1' ).add( new Option( op0, op2, op2)/*@if(1) @else @*/, null /*@end@*/); } </script>
お礼
_pipi_さん，いろいろとありがとうございます。 _pipi_さんの，コードがあまりにも革新的すぎて，ちょっといろいろと本をひもといて調べ物をしていました。 確かに，おっしゃる通りのコードだと不具合は解消されました。 今回，この部分をjavascriptで記述した理由は，start_jiの時間より，早い時間をend_jiに表示させないようにしたかったのです。（start_jiが午前８時だったら，午前９時以降のoptionのみを表示させるようにしたかったのです。） なぜ，Dateを使っているのかという御質問がありましたが，start_jiとend_jiを比較して，常にend_jiが大きくなるようにチェックしたかったからなのですが・・・。（これも何か簡単な良い方法があるのでしょうね。きっと） ですので，教えていただいたコードに若干の工夫（optionを上記のように制限する工夫）を加えさせていただけば必要な表示ができるものと思います。どうもありがとうございました。心から深く感謝申し上げます。 ただ，問題は，教えていただいたコードが，私にとってはあまりにも専門的すぎることです。 /*@if(1) @else @*/, null /*@end@*/ の部分など，私にとっては？？？って感じです。もしよろしければ，御解説いただけませんでしょうか？また，参考文献などご紹介いただけませんでしょうか？よろしくお願いします。
訂正 @cc_onは一度でよかった。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> あ<select name="ji0" id="ji0"></select><br> い<select name="ji1" id="ji1"></select><br> <script type="text/javascript"> //@cc_on for( var i= 8; i< 24; i++){ var n0 = new Option( ( (i<12) ? '午前'+i: '午後'+(i-12) )+'時', i==8, i==8); document.getElementById( 'ji0' ).add( n0/*@if(1) @else @*/, null /*@end@*/); var n1 = new Option( ( (i<12) ? '午前'+i: '午後'+(i-12) )+'時', i==16, i==16); document.getElementById( 'ji1' ).add( n1/*@if(1) @else @*/, null /*@end@*/); } </script>
う～～～ん。困った。再現されません。 以下のものをそのまま、こぴぺしてもだめかな？ というか、このコードじゃだめ？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> あ<select name="ji0" id="ji0"></select><br> い<select name="ji1" id="ji1"></select><br> <script type="text/javascript"> for( var i= 8; i< 24; i++){ var n0 = new Option( ( (i<12) ? '午前'+i: '午後'+(i-12) )+'時', i==8, i==8); document.getElementById( 'ji0' ).add( n0/*@cc_on @if(1) @else @*/, null /*@end@*/); var n1 = new Option( ( (i<12) ? '午前'+i: '午後'+(i-12) )+'時', i==16, i==16); document.getElementById( 'ji1' ).add( n1/*@cc_on @if(1) @else @*/, null /*@end@*/); } </script>
ええと・・・・。 時間を扱うためにDateオブジェクトを使っているように見受けられますが、結局、開始時間と終了時間だけの数値を扱っているので、Dateオブジェクトを使う理由がわかりません。 ８時から（24-8）時間分の時間を並べるだけですよね！ なので for( var i= 8; i< 24; i++){ var n = new Option( ( (i<12) ? '午前'+i: '午後'+(i-12) )+'時'); document.getElementById( 'ji' ).add( n/*@cc_on @if(1) @else @*/, null /*@end@*/); } だけで良さそうな気がします・・・。 end_jiの要素の配列は、jiと同じ構成ですか？ いまいち関係がわかりません。
私の環境opera9.62では再現されませんでしたよ！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <select name="ji" id="ji"></select> <script type="text/javascript"> var start = new Date(2000,1,1,8,0); var end = new Date(2000,1,1,16,0); var zzz = new Date(); zzz.setTime(start.getTime() + (15 * 60 *1000)); for(i=0; i< 24-zzz.getHours(); i++){ if(i + zzz.getHours() < 10){ document.getElementById("ji").options[i] = new Option("午前 " + (i + zzz.getHours()) , (i + zzz.getHours()) + ""); }else if(i + zzz.getHours() < 12){ document.getElementById("ji").options[i] = new Option("午前" + (i + zzz.getHours()) , (i + zzz.getHours()) + ""); }else if(i + zzz.getHours() >= 12 && i + zzz.getHours() < 22){ document.getElementById("ji").options[i] = new Option("午後 " + (i + zzz.getHours() - 12) , (i + zzz.getHours()) + ""); }else if(i + zzz.getHours() >= 22){ document.getElementById("ji").options[i] = new Option("午後" + (i + zzz.getHours() - 12) , (i + zzz.getHours()) + ""); } } for(i=0; i< 24-zzz.getHours();i++){ if(end.getHours() == parseInt(document.getElementById("ji").options[i].value)){ document.getElementById("end_ji").options[i].selected = true; break; } } </script>
補足
_pipi_さん，お骨折りいただきまして深く感謝申し上げます。 end_jiは，jiのことです。私の作っているページでは，初めの時間のstart_jiとend_jiが上下に設置されています。質問するに当たって短くした方が良いと思ったものですから・・・。すみませんでした。 再現性についてお話がありましたが，下記のコードで再現しました。どうも，２つ連続することに何か弊害があるのかもしれませんね。いかがでしょうか？ <body> あ<select name="ji" id="ji"></select> <script type="text/javascript"> var start = new Date(2000,1,1,8,0); var end = new Date(2000,1,1,16,0); var zzz = new Date(); zzz.setTime(start.getTime() + (15 * 60 *1000)); for( var i= 8; i< 24; i++){ var n = new Option( ( (i<12) ? '午前'+i: '午後'+(i-12) )+'時'); document.getElementById( 'ji' ).add( n/*@cc_on @if(1) @else @*/, null /*@end@*/); } </script> <br /> い<select name="jia" id="jia"></select> <script type="text/javascript"> var start = new Date(2000,1,1,8,0); var end = new Date(2000,1,1,16,0); var zzz = new Date(); zzz.setTime(start.getTime() + (15 * 60 *1000)); for(i=0; i< 24-zzz.getHours(); i++){ if(i + zzz.getHours() < 10){ document.getElementById("jia").options[i] = new Option("午前 " + (i + zzz.getHours()) , (i + zzz.getHours()) + ""); }else if(i + zzz.getHours() < 12){ document.getElementById("jia").options[i] = new Option("午前" + (i + zzz.getHours()) , (i + zzz.getHours()) + ""); }else if(i + zzz.getHours() >= 12 && i + zzz.getHours() < 22){ document.getElementById("jia").options[i] = new Option("午後 " + (i + zzz.getHours() - 12) , (i + zzz.getHours()) + ""); }else if(i + zzz.getHours() >= 22){ document.getElementById("jia").options[i] = new Option("午後" + (i + zzz.getHours() - 12) , (i + zzz.getHours()) + ""); } } for(i=0; i< 24-zzz.getHours();i++){ if(end.getHours() == parseInt(document.getElementById("jia").options[i].value)){ document.getElementById("jia").options[i].selected = true; break; } } </script> </body> 「あ」の方のselect要素は，_pipi_さんのコードを使わせていただきました。 「い」の方の要素に問題が出ていませんでしょうか？ いかがでしょうか？ 何かお気づきのことがありましたら，よろしくお願い申し上げます。
new Optionのループの最大値より、selected側のループの最大値が大きくなるからでは？
補足
_pipi_さん，早速ありがとうございました。 ＞selected側のループの最大値が大きくなるからでは とのことだったので，こちらもnew Option側と同じように i=0; i< 24-zzz.getHours(); としてみました。しかし，結果は同じで，空白のOptionのようなものが表示されました。ソースは <select name="ji" id="ji"> <option value="6">午前 6</option><option value="7">午前 7</option><option value="8">午前 8</option><option value="9">午前 9</option><option value="10">午前10</option><option value="11">午前11</option><option value="12">午後 0</option><option value="13">午後 1</option><option value="14">午後 2</option><option value="15">午後 3</option><option value="16">午後 4</option><option value="17"selected="selected">午後 5</option><option value="18">午後 6</option><option value="19">午後 7</option><option value="20">午後 8</option><option value="21">午後 9</option><option value="22">午後10</option><option value="23">午後11</option></select> となっています。ですから，午後11以降は表示されないはずなのに，空白のOptionのようなのが15個表示されます。 つまり，break;が効いていないということなのでしょうか？ お願いします。助けてください。
お礼
_pipi_さん，いろいろとありがとうございました。 私のOperaのバージョンは，9.27でした。0peraを9.62にバージョンアップしたら，質問するきっかけとなったもともとのファイルでも，症状は再現されなくなりました。どうも，Operaの障害だったのかもと思っています。本当にいろいろとありがとうございました。 それにしても，意味不明なり 「//＠cc_on＠・・・」Javascriptじゃなくて，JScriptなのですね？？？私は，もう少し勉強が必要のようですね。頑張ってみます。 いろいろとありがとうございました。 これにて，スレッドを閉めたいと思います。 また，何かありましたら，よろしくお願い申し上げます。