Unique Selectの使い方とサンプル
Unique Selectのサンプル動作デモ
Unique Selectの概要
概要
Unique Selectは複数のセレクトボックスにおいて、それぞれのセレクトボックスで同じ項目を選択できないようにするjQueryプラグインです。例えばセレクトボックスが2つ存在するとき、1つ目のセレクトボックスで「A」という項目を選択した場合、2つ目のセレクトボックスは「A」の項目は選択できなくなります。
Unique Selectの特徴
- ・セレクトボックスで重複項目を選択できなくなる
- ・プルダウン形式とリスト形式の両セレクトボックスに対応
使った感想・評価
いくつかの選択肢の中から、それぞれ別々の項目を複数選択させたいときに使えるjQueryプラグインです。チェックボックスでも同じようなことはできますが、優先順位を付けた項目の選択などにはこちらが使えると思います。
Unique Selectの使い方
jQueryライブラリー、Unique Selectソースファイルを読み込みます。
<script type="text/javascript" src='js/jquery-1.3.1.min.js'></script>
<script type="text/javascript" src='js/jquery.optional.min.js'></script>
<script type="text/javascript" src='js/jquery.uselect.js'></script>
jQueryコードを書きます。設定可能なオプションはありません。
<script type="text/javascript">
$(function(){
$.uSelect('select.badexample');
});
</script>
コンテンツ部分を書きます。
<ul class='inputlist'>
<li>項目1
<select id='bands' class='badexample'>
<option value='1'>100</option>
<option value='2'>200</option>
<option value='3'>300</option>
<option value='4'>400</option>
<option value='5'>500</option>
</select>
</li>
<li>項目2
<select id='bands2' class='badexample'>
<option value='1'>100</option>
<option value='2'>200</option>
<option value='3'>300</option>
<option value='4'>400</option>
<option value='5'>500</option>
</select>
</li>
<li>項目3
<select id='bands3' class='badexample'>
<option value='1'>100</option>
<option value='2'>200</option>
<option value='3'>300</option>
<option value='4'>400</option>
<option value='5'>500</option>
</select>
</li>
</ul>
カスタマイズサンプル
リスト形式のセレクトボックスに適用する
プルダウン形式のセレクトボックスだけでなく、リスト形式のセレクトボックスにも使えます。ただし、multiple属性を付けて複数選択可能にした場合は正しく動作しなくなることがあるので注意。