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年5月24日 22:08
