jQuery Select2 で選択ウィンドウのサイズを項目ごとに変える | GROUP DEV BLOG

2020.06.29

プログラミング

jQuery Select2 で選択ウィンドウのサイズを項目ごとに変える

坂東です。

jQueryのSelect2便利ですよね。
optionが増えまくったとき絞り込みフォームを増やしたくなるけれど、とりあえずSelect2にすると複数列になって視認性が良いし簡易的な検索機能もついてくるのでUI的にはなんとかなっちゃう。
http://program-memo.com/archives/563

Select2のUIはスタイルシートで調整できるのですが、画面で共通。
1画面内にoptionの数が「30個」「120個」「1000個」のselectが共存する場合、それぞれ列は「2列」「4列」「6列」くらいにしたいはず。

そんなときはこうします。

cssはこう。

.select2-container--default .select2-results > .select2-results__options {
  max-height: 600px;
  width: 400px;
  background-color: #fff;
  border: 1pxsolid#ccc;
  border-radius: 003px3px;
}

.select2-container-large .select2-results > .select2-results__options {
    width: 800px;
}

.select2-container-xlarge .select2-results > .select2-results__options {
   width: 1000px;
}

.select2-container--default .select2-results > .select2-results__options {

max-height: 600px;

width: 400px;

background-color: #fff;

border: 1pxsolid#ccc;

border-radius: 003px3px;

}

.select2-container-large .select2-results > .select2-results__options {

width: 800px;

}

.select2-container-xlarge .select2-results > .select2-results__options {

width: 1000px;

}

javascriptはこう。

$("large").select2();
$("large").off('select2:open')
$("large").on('select2:open', ->
  $('.select2-dropdown').addClass('select2-container-large')
)
$("large").off('select2:close')
$("large").on('select2:close', ->
   $('.select2-dropdown').removeClass('select2-container-large')
)

$("xlarge").select2();
$("xlarge").off('select2:open')
$("xlarge").on('select2:open', ->
  $('.select2-dropdown').addClass('select2-container-xlarge')
)
$("large").off('select2:close')
$("large").on('select2:close', ->
   $('.select2-dropdown').removeClass('select2-container-xlarge')
)

$("large").select2();

$("large").off('select2:open')

$("large").on('select2:open', ->

$('.select2-dropdown').addClass('select2-container-large')

)

$("large").off('select2:close')

$("large").on('select2:close', ->

$('.select2-dropdown').removeClass('select2-container-large')

)

$("xlarge").select2();

$("xlarge").off('select2:open')

$("xlarge").on('select2:open', ->

$('.select2-dropdown').addClass('select2-container-xlarge')

)

$("large").off('select2:close')

$("large").on('select2:close', ->

$('.select2-dropdown').removeClass('select2-container-xlarge')

)

と思ってたら、4.1.0から要素ごとにcssを変える機能が標準で搭載されたみたい。
まだbetaなんで使ってはないですが。

dropdownCssClass and selectionCssClass are now available in all builds of Select2

https://github.com/select2/select2/releases

dropdownCssClass and selectionCssClass are now available in all builds of Select2

https://github.com/select2/select2/releases

おわり。

【記事への感想募集中！】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください！

こんな記事が読んでみたい、こんなことが知りたい、調べてほしい！という意見も募集中！
いただいた感想は今後の記事に活かしたいと思います！

感想フォームはこちら

【テクノデジタルではエンジニア/デザイナーを積極採用中です！】

下記項目に1つでも当てはまる方は是非、詳細ページへ！

自分でアプリを作ってみたい
ITで世の中にワクワクを生み出したい
使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら

Qangaroo（カンガルー）

徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
テストの進捗が見える。開発がスマートに進む。
クラウド型テスト管理ツール『Qangaroo（カンガルー）』

https://qangaroo.jp/

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/