重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【GOLF me!】初月無料お試し

こんにちは,よろしくお願いします。

IEやFirefoxでは意図したとおりに表示されるのに,Operaで表示したときだけ,よけいな空白のoptionが表示されて困っています。
(ソースの表示をしても,空の<option></option>が入っているというわけではありません。何も無いようなのですが,下向き▼をクリックすると空白の選択肢が挿入されています。)

下のようにselect要素に時刻のoptionを設定しました。
document.getElementById("ji")がselect要素です。

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()) + "");
 }
}
ここまでは,問題なく表示されます。ここで問題なのは,次のように,selectedの設定をしようとするとよけいな空白optionが挿入されます。

for(i=0; i<24; i++){
 if(end.getHours() == parseInt(document.getElementById("ji").options[i].value)){

 document.getElementById("end_ji").options[i].selected = true;
 break;
 }
}

そこで,
document.getElementById("end_ji").options[i].selected = true;の行の前に,次のようなalert文を挿入すると,
alert("i = " + i + " optval = " + parseInt(document.getElementById("ji").options[i].value) + " end = " + end.getHours());
なぜか,無駄な空白の選択肢が消えて,きちんと表示されました。
Operaが,「 options[i].selected 」の仕様で,IEやFirefoxと違う点があるのでしょうか?
いったい何が原因なのでしょうか?よろしく御指導ください。お願いします。

A 回答 (10件)

さらに追記



ごらんの通り、頭の中で思っていることをまとめて書けない俺!^^;
俺みたいに完成させるまでに、プログラムとずっとにらめっこしなきゃ
いけない奴が使う技?!

//@cc_on
for(i=1,t=0;i<11;t+=i++)/*@ alert(i) @*/;
alert("Total="+t);

これは1から10までの合計を求めるもの。
でも//@cc_on を消すと、alert(i)が実行されない!
つまりデバッグ用として使えるのだ。
    • good
    • 0

http://www.tagindex.com/kakolog/q4bbs/401/607.html
Opera側に問題ありそう?

追記
//@cc_on
//@if(1)
この部分はIEで実行されます
//@else@
それ以外で実行
//@end@

一行なら
/*@cc_on @if(1) この部分はIEで実行されます @else@*/それ以外で実行/*@end@*/

正確には「実行される」という表現はまずいのだろうけど・・・。
「解釈される?」かな。
    • good
    • 0
この回答へのお礼

_pipi_さん,いろいろとありがとうございました。
私のOperaのバージョンは,9.27でした。0peraを9.62にバージョンアップしたら,質問するきっかけとなったもともとのファイルでも,症状は再現されなくなりました。どうも,Operaの障害だったのかもと思っています。本当にいろいろとありがとうございました。

それにしても,意味不明なり 「//@cc_on@・・・」Javascriptじゃなくて,JScriptなのですね???私は,もう少し勉強が必要のようですね。頑張ってみます。
いろいろとありがとうございました。
これにて,スレッドを閉めたいと思います。
また,何かありましたら,よろしくお願い申し上げます。

お礼日時:2008/12/16 22:08

@cc_on もでしたね^^;


詳しくは
http://msdn.microsoft.com/ja-jp/library/eb0w91wa …

簡単にいうと、IEや他のブラウザで処理を別けたいときがあります。
そのときに、使っています。
いったんコメントアウトしているので、他のブラウザからはコメント扱いです
まぁ~自分も下手くそなコードばっかり書いているので説明するのもおこがましくて・・・。
    • good
    • 0

これで目的は達成されたのかっ?!ということで。



<!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>
    • good
    • 0

ごめんね。

なんか役に立ちそうにないね;_;
しかも、簡潔に書けよ!(自分に)ってことで
<!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>
    • good
    • 0
この回答へのお礼

_pipi_さん,いろいろとありがとうございます。
_pipi_さんの,コードがあまりにも革新的すぎて,ちょっといろいろと本をひもといて調べ物をしていました。
確かに,おっしゃる通りのコードだと不具合は解消されました。

今回,この部分をjavascriptで記述した理由は,start_jiの時間より,早い時間をend_jiに表示させないようにしたかったのです。(start_jiが午前8時だったら,午前9時以降のoptionのみを表示させるようにしたかったのです。)
なぜ,Dateを使っているのかという御質問がありましたが,start_jiとend_jiを比較して,常にend_jiが大きくなるようにチェックしたかったからなのですが・・・。(これも何か簡単な良い方法があるのでしょうね。きっと)
ですので,教えていただいたコードに若干の工夫(optionを上記のように制限する工夫)を加えさせていただけば必要な表示ができるものと思います。どうもありがとうございました。心から深く感謝申し上げます。

ただ,問題は,教えていただいたコードが,私にとってはあまりにも専門的すぎることです。
/*@if(1) @else @*/, null /*@end@*/
の部分など,私にとっては???って感じです。もしよろしければ,御解説いただけませんでしょうか?また,参考文献などご紹介いただけませんでしょうか?よろしくお願いします。

お礼日時:2008/12/15 22:51

訂正 @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>
    • good
    • 0

う~~~ん。

困った。再現されません。
以下のものをそのまま、こぴぺしてもだめかな?
というか、このコードじゃだめ?

<!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>
    • good
    • 0

ええと・・・・。


時間を扱うためにDateオブジェクトを使っているように見受けられますが、結局、開始時間と終了時間だけの数値を扱っているので、Dateオブジェクトを使う理由がわかりません。

8時から(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と同じ構成ですか?
いまいち関係がわかりません。
    • good
    • 0

私の環境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が上下に設置されています。質問するに当たって短くした方が良いと思ったものですから・・・。すみませんでした。

再現性についてお話がありましたが,下記のコードで再現しました。どうも,2つ連続することに何か弊害があるのかもしれませんね。いかがでしょうか?

<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_さんのコードを使わせていただきました。
「い」の方の要素に問題が出ていませんでしょうか?
いかがでしょうか?
何かお気づきのことがありましたら,よろしくお願い申し上げます。

補足日時:2008/12/15 20:51
    • good
    • 0

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;が効いていないということなのでしょうか?
お願いします。助けてください。

補足日時:2008/12/15 14:52
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!