「option」の追加におけるselectedの指定での動作は？

質問

「createElement」を用いて、ドロップダウンのoptionを追加するスクリプトを
作成しました。
このドロップダウンでは、月・日を選択するもので当日の日付をselected の属性を
付けたいと考え、つぎのコードを作成しましたが、当月が選択されたところで
スクリプトが止まってしまう（抜けている）のです。

function appendTest(frmParts1,frmParts2,frmParts3){

if (!document.createElement) return;

strDate = new Date();

for (ii = 1;ii < 13;ii++){
var ele = document.createElement("option");
ele.value = ii;
var str = document.createTextNode(ii);
ele.appendChild(str);
document.info_inp.elements[frmParts2].appendChild(ele);
}

// alert("ok1");

document.info_inp.elements[frmParts2].options[strDate.getMonth()].selected = true;

for (ii = 1;ii < 32;ii++){
var ele = document.createElement("option");
ele.value = ii;
var str = document.createTextNode(ii);
ele.appendChild(str);
document.info_inp.elements[frmParts3].appendChild(ele);
}

// alert("ok2");

document.info_inp.elements[frmParts3].options[strDate.getDate()-1].selected = true;

}

コメントにしている alert(); を生かすと、想定どおりに当日の日付が選択されますが、
何故alert(); を外すと想定した動作が行われないのかがわかりません。
selectedを指定する行を外せば全く問題ない動作をするようですが、これでは
当日の日付が選択された状態にはなりません。
なんとかして「日付が選択された状態」にしたいのですが、何らかの処理が
欠けているのでしょうか。
どなた様かご教示願います。

回答No.1

noname#18558 · ベストアンサー

推測ですが、DOM操作だと非同期でオブジェクトが完全に生成される前に選択処理をしようとするのでエラーになるのではないでしょうか。
alertを入れることによって、DOM生成を待つので遅延で正しい動作になるものと思われます。

optionを生成するのには、Optionオブジェクトをつくるやり方もあるので、そちらでやってみてはどうでしょうか。

サンプル乗せておきます。

ついでに、月に合わせた日にちを設定するようにしてます。

function appendTest( frmParts1, frmParts2, frmParts3 )
{
if ( !document.createElement ) return;

var strDate = new Date();
strDate.setMonth(1);

for ( ii = 1; ii < 13; ii++) {
document.info_inp.elements[frmParts2].options[0];
document.info_inp.elements[frmParts2].options[ii-1] = new Option(ii,ii);
}

document.info_inp.elements[frmParts2].options[strDate.getMonth()].selected = true;

var wkDate = new Date();
wkDate.setMonth( strDate.getMonth() + 1 );
wkDate.setDate( 1 );
wkDate.setTime( wkDate.getTime() - 24*60*60*1000 );

for ( ii = 1; ii < wkDate.getDate()+1; ii++ ) {
document.info_inp.elements[frmParts3].options[0];
document.info_inp.elements[frmParts3].options[ii-1] = new Option(ii,ii);
}

document.info_inp.elements[frmParts3].options[strDate.getDate()-1].selected = true;
}

お礼

DQ9様　回答大変ありがとうございました。
おかげさまで目的のドロップダウンボックスを作成することができました。
DOMによる遅延とは全く考えもしませんでした。勉強になりました。