へびにっき

全てのブラウザで安定してSELECT要素を操作するためのプラグイン……というか、実質IE対策プラグインです。

gits: 256077（動作テスト）

ごく小さなプラグインで、余計な機能は一切ついていません。使用できるメソッドは clearOptions と addOption の2つです。当たり前ですが、SELECT要素以外に使っても意味はありません。

clearOptions()

全てのOPTION要素を削除します

addOption(text, value, selected)

新しいOPTION要素を追加します。引数はそれぞれ表示されるテキスト、値、選択状態です

こんな感じで使います。

//start月からend月までの選択肢を作る
function updateMonth(start, end) {
  var select  = $('#month');
  var current = select.val();
 
  select.clearOptions();
  for(var i=start; i<=end; ++i) {
      select.addOption(i + "月", i, i == current)
  }
}

全てのブラウザで（というかIEで）安定した結果を得るために、次の点に注意すると良いでしょう：

• 構築直後に val メソッドによる選択は行わない。代わりに addOption メソッドの第3引数でデフォルトの選択状態を設定する
• 構築処理全体を setTimeout で遅延実行する

検索で来る方のために、このプラグインを作るまでにIEで遭遇した問題も書いておきます：

• 構築後、SELECTの横幅がおかしくなる。構築を繰り返すたびにだんだんと短くなり、最後には消滅する
• 構築に時間がかかる。そのために処理の途中でSELECTの表示がチラつく
• 構築直後に val メソッドで選択状態を変更すると「selected プロパティを設定できませんでした。未定義のエラーです。」となる（val メソッドを使わず、addOption メソッドの第3引数を使うことで回避可能）
• ページ読み込み直後にSELECTを構築すると、選択がレンダリング結果に反映されない（構築処理全体を setTimeout で遅延実行することで回避可能）

コード全体：