ゴルフ松庵

メンバーライフを満喫しシングルプレーヤーを目指す!ブログ

「Bootstrap-select」を使用していると、Javascriptで選択したselectが反映されない

      2017/07/27

Bootstrapのデザインを利用してシステムを開発。

Bootstrapのセレクトボックスが異様にダサいです。
Firefoxはダサいボタンが表示され、IEだとリストがギュッと凝縮されて表示されます。
chromeもイマイチな感じです。

そこで見つけたのが「Bootstrap-select」でした。
こちらも色合いがBootstrapとあっていないのと、リストの選択(カーソルがあっている)している値の網掛けがイマイチ(←点線で囲まれる)だったけど、デフォルトよりはましだったので使っていました。

ただ、リスト内の検索機能は便利です。

「data-live-search=”true”」を指定してあげると、以下のように検索エリアが表示され、絞込みが可能になります。

bootstrap記事_20161231_1

が、しかし。
「Bootstrap-select」を使用したセレクトボックスでもの凄く大切なことが実現できません。

それが、Javascriptで選択したselectが反映されないです。

とjavascriptでしてあげると、画面が表示された際にセレクトボックスが「日本テレビ(日テレ)」となるのだけど、「Bootstrap-select」を使用しているとなってくれません。

最初は「Bootstrap-select」のせいだとは思わず色々試したりしたのですがわからず。
1時間半ハマりました...

「Bootstrap-select(classで指定している「selectpicker」)」を外してみたら反映されました。

よって「Bootstrap-select」が駄目なんだろうと、デザインはダサくなるだろうけどjavascriptからの変更は必要なので「Bootstrap-select」を使用しないことにしました。

 

以上、開発メモでした。
ゴルフネタも無いので仕事で学んだことも書いてみました。

 - システム開発 ,