• かちびと.net

    複数選択できるselect要素で選択した項目を分かりやすく表示するjQueryプラグイン・bsmSelectのご紹介。ユーザビリティ向上にいかがでしょうか。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

複数選択できるselect要素で選択した項目を分かりやすく表示するjQueryプラグイン・bsmSelect

スポンサーリンク

フォームのselect要素で複数選択
可能なフォームをユーザーが利用
しやすくする為のプラグインです。
現在選択中の項目を分かりやすく
表示してくれます。

multiple属性を使った複数選択可能なselect要素はとても便利ですが、ユーザーが使いにくく、利便性向上は課題の一つです。その利便性を向上させてくれるのがbsmSelectです。

bsmSelect


複数選択すると下部に選択中の項目が表示されます。削除も可能。IE7などでも動作しました。

動作サンプルです。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="jquery.bsmselect.js"></script>

本体とプラグインを読み込みます。

jQuery(function($) {
    $("select[multiple]").bsmSelect();
});

あとはセレクタ書くだけ。

他オプションもあります。詳しくは以下でご覧下さい。

bsmSelect / DEMO

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services