IE8 + jqueryでselect要素を複製(clone)した後にoption要素を編集するとエラーが生じる


jQueryでselect要素をまるっと複製(clone)して、その後に$(this).append(“~~”)$(this).empty().html(“~~”)などでoption要素を編集すると、IEでのみ、かな~りヘンな挙動になり、問題が生じる(Firefox、Chromeでは無問題)。

option要素は正しく追加されているのに、プルダウンを出してみると変更前の表示が残っていて、選択すると新しいデータが反映される・・とか意味わからん現象になる。

↓初期表示は「<option>ほげほげ</option>」としとく。

$(this).empty().append(“<option>うがうが</option>”);としてoption要素を入れ替える。

↓あれ?プルダウンしてみると、変更前の「ほげほげ」になったままで変わってない・・・

↓「ほげほげ」を選択してみると・・・「うがうが」になる・・・いみわからん・・・

ちなみにこの現象はjQuery ver 1.8.1(2012/9/21現在の最新版)でも発生している。原因はわからないんだけど、悪いとしたらjQueryかIEのバグになるんだけど、動きをている限り、たぶんjQueryのバグじゃなくてIEバグっぽいニホイが・・・

ネット上で色々と情報を探ると「jQueryオブジェクトとselect要素(もしくはoption要素)の相性が悪い」という記事が散見されるんだけど「select要素をイジルと必ず~」というもので、どうやらIE6でのバグが原因らしい。

IE8と最新のjQueryではここらへんは解消されている様子。ただし、今回の現象はIE8で「クローンしたselect要素のみ」おかしな現象が起きている。

結論を言うと「select要素から作り直す」と問題が解消された。

いろいろと先達の対策を試してみたのだけど、ダメで、$(this).remove() してからselect要素とoption要素をぜ~~んぶ作り直す。このときはjQueryをフル活用しても問題ない。そうするとIEでも問題なく動作した。

まぁ、原因は今でもさ~~っぱりわからないんだけど、「IE + jQueryオブジェクト + select要素(oprion要素)」は今でも相性が悪いらしい。

ってか、くたばれIE。テメェのせいでどんんだけイラン時間つこうてるかわからん!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です