Я использую плагин 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):
Как я могу это исправить?