こんにちは,よろしくお願いします。
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と違う点があるのでしょうか?
いったい何が原因なのでしょうか?よろしく御指導ください。お願いします。
No.10
- 回答日時:
さらに追記
ごらんの通り、頭の中で思っていることをまとめて書けない俺!^^;
俺みたいに完成させるまでに、プログラムとずっとにらめっこしなきゃ
いけない奴が使う技?!
//@cc_on
for(i=1,t=0;i<11;t+=i++)/*@ alert(i) @*/;
alert("Total="+t);
これは1から10までの合計を求めるもの。
でも//@cc_on を消すと、alert(i)が実行されない!
つまりデバッグ用として使えるのだ。
No.9ベストアンサー
- 回答日時:
Opera側に問題ありそう?
追記
//@cc_on
//@if(1)
この部分はIEで実行されます
//@else@
それ以外で実行
//@end@
一行なら
/*@cc_on @if(1) この部分はIEで実行されます @else@*/それ以外で実行/*@end@*/
正確には「実行される」という表現はまずいのだろうけど・・・。
「解釈される?」かな。
_pipi_さん,いろいろとありがとうございました。
私のOperaのバージョンは,9.27でした。0peraを9.62にバージョンアップしたら,質問するきっかけとなったもともとのファイルでも,症状は再現されなくなりました。どうも,Operaの障害だったのかもと思っています。本当にいろいろとありがとうございました。
それにしても,意味不明なり 「//@cc_on@・・・」Javascriptじゃなくて,JScriptなのですね???私は,もう少し勉強が必要のようですね。頑張ってみます。
いろいろとありがとうございました。
これにて,スレッドを閉めたいと思います。
また,何かありましたら,よろしくお願い申し上げます。
No.8
- 回答日時:
@cc_on もでしたね^^;
詳しくは
http://msdn.microsoft.com/ja-jp/library/eb0w91wa …
簡単にいうと、IEや他のブラウザで処理を別けたいときがあります。
そのときに、使っています。
いったんコメントアウトしているので、他のブラウザからはコメント扱いです
まぁ~自分も下手くそなコードばっかり書いているので説明するのもおこがましくて・・・。
No.7
- 回答日時:
これで目的は達成されたのかっ?!ということで。
<!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>
No.6
- 回答日時:
ごめんね。
なんか役に立ちそうにないね;_;しかも、簡潔に書けよ!(自分に)ってことで
<!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が午前8時だったら,午前9時以降のoptionのみを表示させるようにしたかったのです。)
なぜ,Dateを使っているのかという御質問がありましたが,start_jiとend_jiを比較して,常にend_jiが大きくなるようにチェックしたかったからなのですが・・・。(これも何か簡単な良い方法があるのでしょうね。きっと)
ですので,教えていただいたコードに若干の工夫(optionを上記のように制限する工夫)を加えさせていただけば必要な表示ができるものと思います。どうもありがとうございました。心から深く感謝申し上げます。
ただ,問題は,教えていただいたコードが,私にとってはあまりにも専門的すぎることです。
/*@if(1) @else @*/, null /*@end@*/
の部分など,私にとっては???って感じです。もしよろしければ,御解説いただけませんでしょうか?また,参考文献などご紹介いただけませんでしょうか?よろしくお願いします。
No.5
- 回答日時:
訂正 @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>
No.4
- 回答日時:
う~~~ん。
困った。再現されません。以下のものをそのまま、こぴぺしてもだめかな?
というか、このコードじゃだめ?
<!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>
No.3
- 回答日時:
ええと・・・・。
時間を扱うために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と同じ構成ですか?
いまいち関係がわかりません。
No.2
- 回答日時:
私の環境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_さんのコードを使わせていただきました。
「い」の方の要素に問題が出ていませんでしょうか?
いかがでしょうか?
何かお気づきのことがありましたら,よろしくお願い申し上げます。
No.1
- 回答日時:
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;が効いていないということなのでしょうか?
お願いします。助けてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンを押したあとに画像を表...
-
スマホ上で、左右スワイプで次...
-
ラジオボタンを複数選択したと...
-
jsonテキストデータの並び替え...
-
Adobe acrobat proでフォームを...
-
画面に表示したらアニメーショ...
-
2025年相性がいい人のサイトの...
-
jQueryでのレスポンシブが綺麗...
-
jsで質問です。 formをsubmitし...
-
二次元配列を使って順位をだす...
-
【JS】selectでchangeした時の...
-
sessionStorageを調べています。
-
jsで質問です。 ボタンが二つ存...
-
ブックマークレットについて
-
タグを教えてください。
-
CookieをWebStoeageに変える
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
タグを教えてください。
-
jqueryのselect2で検索欄の文字...
-
jsonテキストデータの並び替え...
-
初心者です。gulpでコンパイル...
-
ラジオボタンを複数選択したと...
-
階層別の組織図の自動作成について
-
jQueryで同じクラス名のものを...
-
二次元配列を使って順位をだす...
-
読み込んだQRコードをフォーム...
-
画面遷移を行わずに同一ページ...
-
セレクトを全て選択されていな...
-
【Google Apps Script】「ライ...
-
Adobe acrobat proでフォームを...
-
二次元配列の全要素の全要素を...
-
【GAS】WEBアプリでハイパーリ...
-
GASでGoogleフォームの自動返信...
-
フォームが空欄の時にフォーム...
-
セレクトボックスで配列を呼び...
-
イラストレーター、縦中横のシ...
おすすめ情報
