[JavaScript] IEでセレクトボックスに幅指定をして文字列が切れるのに対応する3

「[JavaScript] IEでセレクトボックスに幅指定をして文字列が切れるのに対応する2」のライブラリを更新した。

以前のエントリ時に caraldo_k さんからご指摘頂いた現象の修正と、その他機能拡張やBugFixを行った。
また、今回はクラス指定無しでHMTL内の全ての select 要素に stretchDropdown.js を有効とするパターンも作成したので一緒に公開する。

修正内容

「option 要素の数が7つを超えると表示が切れてしまう」

option 要素が8つ以上の場合はスクロールバーを表示するようにした。また、その際はスクロールバーの幅だけ iframe の表示領域を広げるように修正した。

「iframe の下線が表示されない場合がある」

iframe 内のul 要素に枠線を付けていたのを、iframe 自体に枠線を付けるように修正した。

「ひとつのselect 要素にプルダウン(iframe)を表示した状態で、本JSが有効となっていると、他の select 要素をクリックすると、IE のデフォルトのプルダウンが表示されてしまう」

2番目にクリックされたselect 要素にプルダウンを表示するように動作を修正した。

拡張内容

「本JSを有効にするために select 要素に id を指定する必要があった」

JS側で動的に id を割り振るように修正した。(既に id が設定されている場合はその id を使用する)

基本的な仕組み及び使用方法は以前のエントリを参考に...

Special Thanks

caraldo_kさん

貴重なご指摘有難うございました。
なかなかスマートな方法が思いつかなかったので、今回のバージョンアップではcaraldo_kさんの方法を採用させて頂きました。またアドバイスやご指摘あれば是非お願いします。

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/83

コメント投稿フォーム