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

2016/12/31 2017/7/27 システム開発

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

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

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

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

<select name="sel" id="idSel" class="form-control selectpicker" data-live-search="true">

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

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

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

    var opt = document.getElementById('idSel').options;
    for(var i = 0; i < opt.length; i++){
        if(opt[i].value == "日本テレビ（日テレ）"){
            opt[i].selected = true;
            break;
        };
    };

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

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

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

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

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