Ajax( prototype.js )でSelectのOptionを書き換える。

AjaxでSelectのOptionを書き換えるときのメモ。

こんなタグがあったとする。

<SELECT id="selectTag" name="selectTag"></SELECT>

これのOPTIONを動的に( Ajax )で書き換えたいと思ったならば

$( 'selectTag' ).innerHTML = obj.responseText;

＃ここで[obj.responseText]で返却される文字列は以下の通りとする

<option value='1'>感想</option>

<option value='2'>要望</option>

<option value='3'>バグ</option>

ってやるとIEでは動かない。

FireFoxでは動くようです。

動かない理由はSelectタグがinnerHTMLで書き換えられるタグではないかららしい。

回避方法としては、以下のようにすること

$( 'selectTag' ).outerHTML = obj.responseText;

＃ここで[obj.responseText]で返却される文字列は以下の通りとする

<SELECT id="selectTag" name="selectTag">

<option value='1'>感想</option>

<option value='2'>要望</option>

<option value='3'>バグ</option>

</SELECT>

これで動きます。

innerHTMLがタグの中身を書き換えるのに対して、

outerHTMLは外側からまるっと書き換える処理のようです。

これでIEで正常に書き換える事ができるようになりました。

が、FireFoxでは動かないという結果に。

FireFoxさまはどうやらouterHTMLには対応していないらしいとの事。

・IEでSelectの中身が書き換えられない。

・FireFoxではouterHTMLはサポート外

以上の点を踏まえて、回避方法を考えてみた。

<div id='selectTagSet'></div>

$( 'selectTag' ).innerHTML = obj.responseText;

＃ここで[obj.responseText]で返却される文字列は以下の通りとする

<SELECT id="selectTag" name="selectTag">

<option value='1'>感想</option>

<option value='2'>要望</option>

<option value='3'>バグ</option>

</SELECT>

これで、IEもFireFoxも正常に動きます。

ちなみにサンプルは こちら

<Div>の中身をinnerHTMLで書き換えてあげれば、

幸せになれる！