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。テメェのせいでどんんだけイラン時間つこうてるかわからん!!