selectの複数選択を可能にするmultiple属性をJavaScriptで直感的にする「jQuery crossSelect plugin」

htmlのselectタグには複数選択を可能にするmultiple属性があります。
でも、なんとなくわかりにくくありませんか？
そんなときはjQuery crossSelect pluginを利用して、直感的でわかりすいフォームにしましょう。

使用方法

jQuery crossSelect pluginからjquery.crossSelect.js、jquery.crossSelect.cssを、jQueryからjquerry.jsをダウンロードしましょう。


<link href="jquery.crossSelect.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.crossSelect.js"></script>
<script>
$(document).ready(function(){
	$('#id名').crossSelect({
		listWidth: 200 //リストの幅
	});
});
</script>

上記を記述したら、selectを以下のように書き込めば完成です。


<select id="demo" multiple="multiple"> 
	<option value="1" >項目１</option> 
	<option value="2" >項目２</option> 
	<-- 以下、個数分 -->
</select>

サンプル

Javascriptサンプルページ一覧

skuare.net