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 中的字母，选择选择器就应该填充与 wordMap 中该字母相对应的选项。默认标题也应从“没有可用的单词”更改为“从以下单词中选择”。下面是代码片段，这里的对象是下拉菜单的 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 中运行此命令时，我发现选择器以一种奇怪的方式添加单词，如下所示(例如:当选择 D 时):

我该如何解决这个问题？

Answer 1

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

如果您甚至可以发布指向相关页面的链接(如果担心公共(public)链接，请私下发送)，我(或其他任何人)都可以查看相关元素。

如果您尝试在 JSFiddle 中重现此问题但无法重现，那么更有理由怀疑问题出在您的 CSS 或代码本地。尝试删除页面上的所有 CSS 文件，除了 Bootstrap.css 以及此控件附带的任何 CSS 文件。