javascript - bootstrap-select: 複数の選択ボックスにオプションを追加した後、正しく更新されない

Question

複数の値を選択するオプションを提供するために、bootstrap-select プラグイン ( http://silviomoreto.github.io/bootstrap-select/ ) を使用しています。文字をキーとして、対応する文字で始まる単語を値として持つハッシュテーブルがあります。文字のリストを含むドロップダウンがあり、文字が選択されると、複数選択ボックスにその文字の単語が入力されます。

.cshtml

<div class="row word-letter">
    <div class="col-md-3">
        <div class="input-group">
            <input type="text" class="form-control dropdown-text letterVal" placeholder="Select Letter" autocomplete="off" />
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu pull-right letterList"></ul>
            </div>
        </div>
    </div>

    <div class="col-md-5">
        <select class="selectpicker" multiple title="No words available"></select>
    </div>
</div>

letterList からの文字が選択されると、selectpicker に wordMap 内のその文字に対応するオプションが取り込まれます。また、デフォルトのタイトルが「No words available」から「Select from following words」に変わるはずです。以下はコード スニペットです。ここでのオブジェクトは、ドロップダウン メニューへの jquery ハンドルです。

.js

var wordMap = {
    "A": ["Aware", "Analog"],
    "D": ["Dare", "Digital"],
    "F": ["Flare", "Fist", "Frame"]
};

var selectedLetter = theObject.text(); 
var wordSelectElem = theObject.parents('.word-letter').find('.selectpicker')
        if (wordSelectElem.length > 0) {

            $.each(wordMap[selectedLetter], function (key, value) {
                wordSelectElem.append($('<option>' + value + '</option>'));
            });
            if (wordSelectElem.size() > 0) {
                wordSelectElem.prop('title', "Select from following words");
            }
            wordSelectElem.selectpicker('refresh');
        }

これをIEで実行すると、selectpickerが次のように奇妙な方法で単語を追加することがわかります（例：Dが選択された場合）：

どうすればこれを修正できますか?