Select（プルダウン）のオプションをJavaScriptで書き換えるときのメモ。

今回のサマリ: 
IEだと new Ajax.Updater(element, …) を利用する際、elementがSelect（プルダウン）の場合は書き換えが行われなかった。
しかたがないので、IEのときは、いったんouterHTML & innerHTMLを使って書き換えた。

* * *

ユーザさんからのリクエストで、Redmineの本来のプルダウンを拡張して書き換えるプラグインを作っているところ。

最初はサーバサイドでの実装は要らず、クライアントサイドでJavaScriptだけでプルダウンを書き換えできると思い、そのコードを書いたのですが、IE / ChromeではOKだったものの、Firefoxでは思った通りに動作しませんでした…。

具体的には、”selected=selected (or selected=true)” で指定されたOptionのIndexが、Javascriptで上書きをし、別のOptionをselectedにしても、書き換え後のselectedが有効にならず、前のselectedのIndexをキャッシュしてしまうという症状。

検索すると、なにやらそれらしい情報もありました。

• http://stackoverflow.com/questions/1479233/why-doesnt-firefox-show-the-correct-default-select-option

その後の追加のリクエストもあって、ブラウザだけでは対応は難しいのかな…と思い、プルダウンを書き換えるコードをサーバサイドで生成（コントローラで作成）し、Ajax.updaterで取得 –> 書き換えるように修正しました。

JavaScriptのコードは、<select id=”select1”><potion>…</option></select> というプルダウンの中身を、　new Ajax.Updater(‘select1’, 'コントローラのURL’ … )  …で書き換えるようにしました。

ところが！

今度はFirefox / Chromeでは大丈夫だったのに、IEでは書き換えが行われません！（データが欠損されるわけではなく、書き換えが行われないまま）

操作は不都合はないけれど、IEのユーザだけこのカスタマイズが有効になってくれません…。

あれこれ探ると、なんとかこれにHit。

• IEはinnerHTMLでselectにoptionを足せない。バグ。

Prototype.Browser.IE　でIEかどうかを判断し、IEの場合は new AjaxUpdater() ではなく、new XMLHttpRequest()　でコントローラのデータを取得し、返ってきたデータ (xmlhttp.responseText) を、innerHTML, outerHTML で処理するようにしました。

document.getElementById(‘xxxx’).innerHTML = '' + str;"
document.getElementById(‘xxxx’).outerHTML = document.getElementById(‘xxxx’).innerHTML;

クロスブラウザって大変なんですね..。

へなちょこですが、Flex使ってUIを作っていたときは、ブラウザで気になるのはサーバサイドへの通信の仕方くらい（キャッシュとか）で、あんまり気にしていませんでした(^^;;