bootstrap-select：向多个选择框添加选项后，它不会正确刷新答案

【问题标题】：bootstrap-select: after adding options to multiple select box it doesnt refresh correctlybootstrap-select：向多个选择框添加选项后，它不会正确刷新
【发布时间】：2014-02-10 10:45:28
【问题描述】：

我正在使用引导选择插件 (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 中该字母对应的选项。并且默认标题应从“无可用词”更改为“从以下词中选择”。下面是sn-p的代码，这里的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时）：

我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-selectors bootstrap-select

【解决方案1】：

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

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

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

【讨论】：