bootstrap-select: после добавления параметров в поле множественного выбора он не обновляется правильно

Я использую плагин 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 выбрана, 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): Выберите неправильно заполненный

Как я могу это исправить?


person AloofC    schedule 07.02.2014    source источник


Ответы (1)


Мое лучшее предположение, исходя из того, что я вижу выше, заключается в том, что у вас есть немного ошибочного CSS, который вызывает проблему. Это было бы очень легко найти с помощью FireBug или любых других инструментов разработчика на основе браузера, которые позволят вам увидеть, какой CSS применяется к этому элементу (или, возможно, к окружающим элементам).

Если вы даже можете опубликовать ссылку на рассматриваемую страницу (отправьте ее в частном порядке, если есть опасения по поводу общедоступной ссылки), и я (или кто-либо другой) смогу просмотреть рассматриваемые элементы.

Если вы попытаетесь воспроизвести это в JSFiddle и не сможете, тем больше причин подозревать, что проблема связана с вашим CSS или кодом. Попробуйте удалить все файлы CSS на странице, кроме Bootstrap.css и любого файла CSS, поставляемого с этим элементом управления.

person Todd Davis    schedule 10.02.2014