でぃべろっぱーず・さいど

昨日のエントリ「日付のセレクトプルダウンを動的に作る jQuery plugin を作った」で、select タグに対してoptionタグを削除したり、追加したりしたんですが、その中でちょっとだけはまったことをメモ。

option タグを select タグに append するとき、最初↓こんな風に書いてました。

this.append('<option value="1">1</option>');

this はselect のjQueryオブジェクトです。上記のappendをfor文でぐるぐる回す感じ。

で、

<select id="year"></select>
<select id="month"></select>
<select id="date"></select>

↑こういうoptionがないタグに対して、ページ表示時に、

$(function(){
$('#year').numericOptions({from:2007,to:2011});
$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});
$('#date').numericOptions({valuePadding:2});
});

こんな感じで実行してやると、IE のときに、年と日のプルダウンの横幅が正常に表示されないんですね。

というわけで、↓Option オブジェクトを new して、options のオブジェクトに入れる形にしました。

this.options[j] = new Option(padfunc(i,settings.namePadding),padfunc(i,settings.valuePadding));
//padfung は0詰め用の関数

IE6には、select タグに optionタグを innerHTMLで差し込むことが出来なって言う地味なバグがあるので（BUG: Internet Explorer は、オブジェクト選択の innerHTML プロパティを設定するのに失敗します。）、そこはjQueryのオブジェクトに頼らない方が良いのかなと。もしかしたらOptionタグを設定するメソッドを僕がしらないだけかもしれませんが。

ついでに、IEのDOM に関連するバグで、table を動的にcreateElement してappend する場合、TBODY タグがないと表示されないってバグがあるんですが、これはjQueryは上手くクロスブラウズ対応してくれています。

$('body').append('<table><tr><td>a</td></tr></table>');

↑このコードで生成されるHTMLは、ちゃんと

a

になってるんですね。