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中的字母后，应在selectMap中填充与wordMap中该字母对应的选项。此外，默认标题应从“无可用单词”更改为“从以下单词中选择”。下面是代码片段，这里的Object是下拉菜单的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时）：

我该如何解决这个问题？

Answer 1

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

如果您甚至可以发布相关页面的链接（如果有关于公共链接的问题，请私下发送），我（或其他任何人）可以查看相关元素。

如果你试图在JSFiddle中重现这个并且不能，那么更多的理由怀疑问题是本地你的CSS或代码。尝试删除页面上的所有CSS文件，除了Bootstrap.css和此控件附带的任何CSS文件。