福岡市でグロースハック、データ分析とサイト製作、webデザイン教育を行っています。

あまり使う機会はないと思いますが・・・。先日、jQueryでselectにデフォルトとなるoptionを追加する操作をしたときに

HTML

<div id="areaMap">
  <select>
    <option value="hokkaido">北海道</option>
    <option value="aomori">青森</option>
    <option value="miyagi">宮城</option>
    <option value="akita">秋田</option>
    <option value="iwate">岩手</option>
    <option value="yamagata">山形</option>
    <option value="fukushima">福島</option>
  </select>
</div>

jQuery

var areaMap = $('#areaMap > select');
areaMap.prepend('<option value=\"#\">北海道・東北エリア</option>');

と書いたのですが、Internet Explorerだけ期待通りの表示になりません。要素は追加されたものの、ページを表示したときに「北海道・東北エリア」が最初に表示されていない状態になるのですが、jQueryを以下のように書いたらうまくいきました。備忘録として。

jQuery

var areaMap = $('#areaMap > select');
areaMap.prepend('<option value=\"#\">北海道・東北エリア</option>');
areaMap.children('option').attr('selected',false);
areaMap.val('#');

BGM：Storobolight by スーパーカー

model 河村友歌 photo by すしぱく at pakutaso