Help us understand the problem. What is going on with this article?

jQuery UI multiselectの備忘録

More than 3 years have passed since last update.

使用したもの

  1. jQuery
  2. jQueryUI
  3. jquery.multiselect.js
  4. jquery.multiselect.css

コード

html
<select id="example" name="example" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
script
$(document).ready(function(){
   $("#example").multiselect({
       header: true,
       height:,175
       minWidth:,225
       checkAllText:"すべて",
       uncheckAllText:"未選択",
       noneSelectedText:,
       selectedText:"# 個選択",
       selectedList: 3,
       show:,['bounce',500],
       hide:,['drop',500],
       autoopen:false,
       multiple:true,
       classes:'.multi__etc'

       position: {
            my:'center',
            at:'center'
        }
   });
});

Option詳細

すべてのオプションを記入しなくてもいいが
その場合はデフォルト値のオプションが適用される

header (default:true)

  • true:

ドロップダウンヘッダーに"check all","uncheck all"×ボタンが表示される
別オプションのcheckAllTextやuncheckAllTextに任意の文字を入れると
それに従って表示する

  • false:

ドロップダウンのヘッダーなし

  • 文字列:

ドロップダウンのヘッダーに指定した文字列と×ボタンが表示される.

height (default:175)

選択領域の高さを指定(px)

minWidth (default:225)

全体の横幅の最小サイズを指定(px)

checkAllText (default:Check All)

文字列を入力するとドロップダウンヘッダーのCheck Allボタンに表示する文字を指定した文字列に変更する。

uncheckAllText (default:Uncheck All)

文字列を入力するとドロップダウンヘッダーのUncheck Allボタンに表示する文字を指定した文字列に変更する。

noneSelectedText (default:Select Option)

文字列を入力するとチェックボックス未選択時に表示されるSelect Optionを指定した文字列に変更する。

selectedText (defalut:# selected)

チェックボックスを選択しているとき#に選択個数を表示する。

selectedList (default: false)

数値を入力すると
ドロップダウンリストの選んだものを、指定された数値を上限にドロップダウンのバーに表示する。
上限を超えたときはselectedTextに指定してるものが表示される。

show (defalut:empty string)

ドロップダウンを開くときに使用する効果と効果時間(ms)で設定する
詳しくはjQueryUiエフェクト

hide (defalut:empty string)

ドロップダウンを閉じるときに使用する効果と効果時間(ms)で設定する
詳しくはjQueryUiエフェクト

autoopen (default:false)

  • true

スクリプトのロード時に自動でドロップダウンを開く

  • false

スクリプトのロード時に自動でドロップダウンを開かない

multiple (default:true)

  • true

チェックボックスを複数選択することができる

  • false

チェックボックスを複数選択することができない

classes (defalut:empty object)

カスタマイズするために指定したクラスを
.ui-multiselect .ui-multiselect-menu
に追加する

position (defalut:empty object)

ドロップダウンの表示位置を調整することができる。

okayuoishiyo
色々
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away