Prototype.js使ってajaxでSelectタグのプルダウン連動をやってたらはまった。
あるSelectボックスの値を変えると、連動して他のSelectボックスの値をAjaxでサーバから取得し、optionタグの内容を全て入れ替えるというもの。例えば、都道府県を変更したら、連動してその県の市町村がプルダウンに入るようなもの。
Firefoxだと問題ないんだけど、IEだとSelectタグのオプションタグごと全てAjax経由で取得して入れ替えようとしたら、だめだった。IEのSelectタグはReadonly属性らしい。
とりあえず、spanタグでSelectタグごと囲んで書き換えるという荒業で対応。Ajaxで取得するのはSelectタグ、optionタグの全て。divタグで囲むと不用意に改行が入ってレイアウトが崩れるので、spanタグで対応。
とりあえず、view側は下記のようにした。smartyタグが入ってます。
<select name="address1" id="address1"> <option></option> {{html_options options=$select_address1 selected=$request.address1}} </select> <span id="address2"> <select name="address2" id="address2val"> <option></option> {{html_options options=$select_address2 selected=$request.address2}} </select> </span> <script type="text/javascript"> //<![CDATA[ new Form.Element.EventObserver('address1', function(element, value) {new Ajax.Updater('address2','/hoge/ajaxselect/address2', {asynchronous:true, evalScripts:true, parameters:Form.Element.serialize('address1'), requestHeaders:['X-Update', 'address2']})}) //]]> </script>
それで、Ajaxで'/hoge/ajaxselect/address2'にアクセスすると下記の市町村を含むselectタグを返す
<select name="address2" id="address2val"> <option></option> {{html_options options=$select_address2}} </select>
