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

Post on:2009年9月7日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

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

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

<textarea name="code" class="js" cols="60" rows="5">
$(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>");
		});
	});
});
</textarea>