prototype.js使えば楽勝、とか思っていたら意外とハマったのでメモ。

iTunesみたいなselectが３つ並んで左から選択するUIを作りたいと。
で、FirefoxやSafariだと

<option value="0">ロック</option>
<option value="1">ダンス</option>
・・・
みたいにoptionタグだけか、

<select id="hoge">
  <option value="0">ロック</option>
  <option value="1">ダンス</option>
</select>
みたいにselectタグをサーバで返して、
selectタグ自体を直接Ajax.Updaterで書き換え可能でした。
$('hoge').innerHTML = request.responseText;
でイケたと。


でもIEだとダメで、同じことにハマってる人も何人かいたみたい。
http://snowland.net/nucleus/item/742


MSのサイトには３つ回避策が書いてあったけど、
結局divでselectを囲んでdivごと書き換えてみました。
サーバでは上記のようなselectを返しておいて、

var isMSIE = /*@cc_on!@*/false;

if (isMSIE) {
    $('hoge').outerHTML = '<div id="hoge">' + request.responseText + '</div>';
} else {
    $('hoge').innerHTML = request.responseText;
}

として、IEだったらouterHTMLにdivを付け足して書き込み。
１行目はこれだけでIEかどうか判定するためのコード。

最初は囲んだdivを書き換えるだけでイケる、
と思ってたらダメだったので、IE判定＆outerHTMLへの書き込みをしてます。
やり方がまずかっただけかも。もしくは寝ぼけてたか。
ま、とりあえず動いたのでこれで。