選択した項目を明示させられるjQueryプラグイン「lister」

あるリストの中から選択させて申し込ませたい場合、少なければcheckboxなどでも耐えられるかもしれませんが、多くなってくると何がなんだかわかりにくくなります。
そこでjQueryプラグインのlisterを利用し選択項目を明示してあげましょう。

使用方法

listerからファイルをダウンロードします。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.lister.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#id名1").lister("id名2");	
});
</script>
上記を記述したら、id名1にリストを書き、選択したものを表示させたい場所にid2を書きます。

<ul id="id名1">
   <li>Alabama</li>
   <li>Alaska</li>
   <!-- 以下項目分 -->
</ul>      
<ul id="id名2"></ul>
※aなどは勝手に上部にリスト化されて表示されるようになります。
また必要に応じてCSSで見た目を調整下さい。

サンプル

Select all
De-select all
リスト
選択項目

Javascriptサンプルページ一覧
skuare.net