やっぱりIEのselect要素は鬼門だわ

最近はあまりAjaxを扱っていないので、IEのバグとかには嵌っていないのですが、ひさびさに嵌りました。
IE7β2のselect要素を、table要素で囲むと、Javascriptで要素を追加しても更新がかかりません。

具体的には次のコードのような現象。

<html>
<script>
function clickclick(target)
{
target.options[target.length] = new Option("a","");
}
</script>
<form name="f1">
<input type="button" value="OK ->" style="width: 4em;" onclick="clickclick(document.f1.ok);"><br>
<select multiple size=5 style="width: 10em;" name="ok"></select>
<table>
<tr><td>
<input type="button" value="NG ->" style="width: 4em;" onclick="clickclick(document.f1.ng);"><br>
</td><td>
<select multiple size=5 style="width: 10em;" name="ng"></select>
</td></tr>
</table>
</form>
なぜか知らんが、Tableタグの中に入っているとうまくいかない。
</html>


Z-indexバグが直ったと思ったら、これかーっ、まあレアな現象だと思います。

現象としては、innerHTMLには正しくタグが入っていることを確認できていますので、更新がかかっていないだけだと思います。

それで、回避手段ですが、一度DOMから外して、登録しなおしてやることで再描画を強制的に行わせることができます。
したがって、
function click(target)
{
target.options[target.length] = new Option("a","");
var p = target.parentNode;
p.removeChild(target);
p.appendChild(target);
}
と、してやれば、更新されます。

まあ、なんにせよ、とかくコレはバグなんで、IE7の正式版では直ってることを祈ってます。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック