Javascript 引导选择：将选项添加到多个选择框后，无法正确刷新

我使用引导选择插件来提供选择多个值的选项。我有一个哈希表，以字母作为关键字，以相应字母开头的单词作为值。我有一个字母列表下拉列表，一旦选择了一个字母，多选框中应该填充该字母的单词

.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>

一旦选择了字母列表中的字母，选择器选择器应填充与wordMap中该字母对应的选项。而且默认标题应该从“无可用单词”更改为“从以下单词中选择”。下面是代码片段，这里的对象是下拉菜单的jquery句柄

.js

当我在IE中运行此功能时，我看到选择器以一种奇怪的方式添加单词，如下所示：当选择D时：

---

如何解决这个问题？

从我上面看到的情况来看，我最好的猜测是，您有一点错误的CSS导致了这个问题。使用FireBug或任何其他基于浏览器的开发人员工具很容易找到它，这些工具将允许您查看将什么CSS应用于该元素或周围的元素

如果你甚至可以发布一个链接到有问题的页面，如果有关于公共链接的问题，请私下发送，我或任何其他人都可以查看有问题的元素

如果您试图在JSFiddle中重现这个问题，但却无法实现，那么就更有理由怀疑问题出在您的CSS或代码的本地。尝试删除页面上除Bootstrap.CSS和此控件附带的任何CSS文件之外的所有CSS文件

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