コニファ・ロゴ

csstest:jQueryプラグインMulti-Column-Select.jsを使って、セレクトボックスをマルチカラムスタイルに

jQueryプラグインMulti-Column-Select.jsを使うことで、マルチカラムスタイルのセレクトボックスを実装できます。ありきたりなフォームのセレクトボックスが少しリッチで、選択しやすいものになります。スタイルのclass名やメニューのテキスト、duration、複数選択、その他の設定をhtml内のスクリプトのパラメーターで変更できます。

(2)のソース(html内のスクリプト)

$('#selectcontrolm').MultiColumnSelect({
    multiple: true,
    menuclass : 'mcs', 
    openmenuClass : 'mcs-open',
    openmenuText : 'ここをクリックしてオプションを表示(複数選択可)',
    containerClass : 'mcs-container',
    itemClass : 'mcs-item',
    idprefix : 'yourOwnID-',
    hideclass : 'hidden',
    openclass : 'open',
    duration : 200,
    hideselect : false,
    });

(1)シングル選択 マルチカラム・ドロップダウン

 

(2)複数選択 マルチカラム・ドロップダウン

 

 

戻るボタン