坂東です。

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;
}

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')
)

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

dropdownCssClass and selectionCssClass are now available in all builds of Select2

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

おわり。