1

我正在使用引导选择插件（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 中该字母对应的选项。并且默认标题应从“无可用词”更改为“从以下词中选择”。下面是代码片段，这里的对象是下拉菜单的 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 选择时）： 选择错误填充

我怎样才能解决这个问题？

4

1 回答 1

0

My best guess, from what I see above, is that you have a bit of errant CSS that is causing the problem. This would be very easy to locate using FireBug or any other browser based developer tools that will allow you to see what CSS is being applied to that element (or perhaps the surrounding elements).

If you can even post a link to the page in question (send it privately if there is concern about a public link) and I (or anyone else) can look at the elements in question.

If you try to reproduce this in JSFiddle and can't then all the more reason suspect the problem is local your CSS or code. Try removing all CSS files on the page except the Bootstrap.css and whatever CSS file comes with this control.

于 2014-02-10T02:45:28.590 回答