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

htmlのselectタグには複数選択を可能にするmultiple属性があります。
でも、なんとなくわかりにくくありませんか?
そんなときはjQuery crossSelect pluginを利用して、直感的でわかりすいフォームにしましょう。
selectの複数選択を可能にするmultiple属性をJavaScriptで直感的にする「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" >項目1</option>
<option value="2" >項目2</option>
<-- 以下、個数分 -->
</select>

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

sponsors

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

記事作成:
記事URL:

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