[JS]セレクトメニューの中身を印刷できるようにするスクリプト

select要素で実装したセレクトメニューの中身を印刷や印刷プレビュー時に表示させるスクリプトをCSS-Tricksから紹介します。

実装方法は簡単で、セレクトメニューはそのままで、jquery.jsと下記のスクリプトを記述します。

$(function(){
	$("select").each(function(i){
		var $el = $(this);
		var $options = $el.find("option");
		$el.after("
<div class='print-select'>Options:
<ul id=sel"+i+"></ul>
</div>

");
		var $curPrintBox = $("#sel"+i);
		$options.each(function() {
			$curPrintBox.append("
<li>"+$(this).text()+"</li>

");
		});
	});
});

セレクトメニューの各項目はul要素のリストで実装されます。