Bootstrap-selectでセレクトボタンもスタイリッシュに

Bootstrapを利用するとそれだけでかなりフォームデザインがよくなるものの、セレクトボックスはほぼデフォルトのままでいまいちです。別途、Bootstrap-selectというライブラリを追加することで、スタイリッシュなセレクトボックスにしてくれます。

使い方

Bootstrap-selectを公式サイトよりダウンロードし、下記ファイルをHTMLから読み込むようにします。

• "bootstrap-select.css"　or "bootstrap-select.min.css"
• "bootstrap-select.js" or "bootstrap-select.min.js"

また、jQueryで動作することが前提ですので、jQueryもダウンロードし、読み込みます。

Code1は"bootstrap-select.css"を"css"フォルダに、"bootstrap-select.js"と"jquery.js"を"js"フォルダに配置した場合の例です。

また、ダウンロードしたり、フォルダ配置とか面倒だという場合はCDNを利用したロードも可能です。(CDNを使う目的は本来別ですが)適当なCDNを探してリンクします。

bootstrap-selectでsubText指定時のtitle属性について

Bootstrap-selectを導入し、showSubtextオプションをオンにしてみたのですが、できあがったSelect Boxにフォーカスしてみると、ツールチップの表示が変です。

  Currency
  
    USD
    JPY
  

Bootstrap-selectで、subTextはsmallタグで指定されますが、タグごとエスケープされてツールチップに表示されています。要素を調査してみると。。。

1行目のbuttonタグのtitle属性にがっつりsmallタグごと入っています。考慮漏れってやつでしょうか。

bootstrap-select.jsの415行目(下記Code3参照)でbuttonタグのtitle属性をセットしているのですが、title属性と、実際にbuttonに表示されるテキスト(上記Code2の3～6行目)と同じ変数titleからセットしています。そのため、showSubtextオプションがオフのときは問題ないのでしょうが、Subtextを表示する場合はsmallタグが入り込んでツールチップ表示が残念な感じになります。

this.$button.attr('title', htmlEscape(title));
this.$newElement.find('.filter-option').html(title);

本来的には実際にbuttonに表示されるテキストとtitle属性の値は別々に生成されるべきですが、面倒なのでtitle属性からはhtmlタグを取ってからセットするようにしました。

this.$button.attr('title', $('' + title + '').text());
this.$newElement.find('.filter-option').html(title);

いい感じにツールチップが表示されました。