skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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>

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

記事作成：2009年05月24日

前の記事：wysiwygエディターをjQueryプラグインで簡単導入「jQRTE」
次の記事：簡単・軽量の吹き出しJavaScript「vTip」