[JS]IEでフォームのselect要素の中身が省略されてしまうのを解消するスクリプト -ieSelectWidth

Post on:2010年7月2日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

IEでフォームのselect要素にwidthを指定した際、はみ出した箇所が省略されてしまうのを解消するスクリプトを紹介します。

Internet Explorer Select Width Bug Workaround
デモページ

対応ブラウザは2010年6月17日の時点でIE6, 7, 8で、スクリプトを使用すると他のブラウザ（Firefox, Chrome, Safari, Opera）と同様に省略されずに表示されるようになります。
※IE6には別途bgiframe Pluginが必要です。

スクリプトでは他の機能として、スクリプト側でのwidth指定、margin/padding/borderの設定も可能です。

設置は簡単で、既存のフォームにも簡単に適用できます。
jquery.jsとjq.ie-select-width.jsを外部ファイルで記述し、下記のスクリプトを記述します。

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
<script type="text/javascript">
$(function (){
	$('select#fixed-select-css').ieSelectWidth
		({
			containerClassName : 'select-container',
			overlayClassName : 'select-overlay'
		});
});
</script>
</textarea>

$(function (){

$('select#fixed-select-css').ieSelectWidth

({

containerClassName : 'select-container',

overlayClassName : 'select-overlay'

});

</script>

</textarea>

HTML

<textarea name="code" class="html" cols="60" rows="5">
<select name="fixed-select-css" id="fixed-select-css">
	<option value="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet euismod metus?</option>
	<option value="b">Etiam ultrices sollicitudin justo, egestas adipiscing magna laoreet ut.</option>
	<option value="c">In sit amet euismod metus? In dignissim eros id nisi dignissim volutpat. </option>
</select>
</textarea>