Я использую этот плагин jQuery Multiselect https://github.com/nobleclem/jQuery-MultiSelect для преобразования всех моих полей выбора, в которых включен множественный атрибут, в раскрывающиеся поля с флажками. Я загружаю параметры в поле выбора из базы данных. После отправки формы я могу сохранить несколько выбранных данных, но когда я получаю данные обратно из базы данных, я не могу отобразить сохраненные данные обратно в поле множественного выбора, установив соответствующие флажки.
Плагин multiselect имеет метод loadOptions
, но, используя этот метод, я должен сгенерировать все данные о параметрах с именем параметра, значением параметра и статусом проверки и установить его для подключаемого модуля с множественным выбором. Как я могу легко это сделать, если у меня есть массив данных, которые необходимо проверить / выбрать в плагине множественного выбора?
HTML
<select name = "abc" id = "abc" multiple title = "Test Number?">
<option value = "1">Test 1</option>
<option value = "2">Test 2</option>
<option value = "3">Test 3</option>
<option value = "4">Test 4</option>
<option value = "5">Test 5</option>
</select>
JS (у меня есть несколько полей для множественного выбора, и я запускаю их, как показано ниже)
$.each($("select[multiple]"), function (key, selectbox) {
$("#" + selectbox.id).multiselect({
texts: {placeholder: $("#" + selectbox.id).attr("title")}
});
});
Мой массив сохраненных данных - [1,3,4]
Мне нужно установить эти сохраненные данные в поле выбора и установить флажки, не используя метод loadOptions
.
Вы можете использовать функцию jQuery .filter()
на вашем select
options
, чтобы предварительно выбрать нужные перед инициализацией плагина multiselect
.
Здесь,
$('option',this).filter((_,e) => saved_data.includes(+e.value)).prop('selected',true);
Предварительно выбирает каждую опцию перед вызовом .multiselect()
.
let saved_data = [1, 3, 4];
$('select[multiple]').each(function() {
$('option', this).filter((_, e) => saved_data.includes(+e.value)).prop('selected', true);
$(this).multiselect({
texts: {
placeholder: $(this).attr("title")
}
});
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://springstubbe.us/projects/demos/jquery-multiselect/scripts/index.js?1523890673"></script>
<link rel = "stylesheet" href = "https://springstubbe.us/projects/demos/jquery-multiselect/styles/index.css?1518818712">
<select name = "abc" id = "abc" multiple title = "Test Number?">
<option value = "1">Test 1</option>
<option value = "2">Test 2</option>
<option value = "3">Test 3</option>
<option value = "4">Test 4</option>
<option value = "5">Test 5</option>
</select>
Если параметры имеют атрибут
selected
, он не работает? Можете ли вы создать для этого за работойфрагмент?