Автоматическая проверка сохраненных данных в jQuery Multiselect - PullRequest
Новая
       10

Автоматическая проверка сохраненных данных в jQuery Multiselect

0 голосов
/ 02 мая 2018

Я использую этот плагин jQuery Multiselect https://github.com/nobleclem/jQuery-MultiSelect, чтобы преобразовать все мои поля выбора, для которых включен атрибут множественного доступа, в выпадающие окна с флажками. Я загружаю опции в поле выбора из базы данных. После отправки формы я могу сохранить несколько выбранных данных, но когда я получаю данные обратно из базы данных, я не могу отобразить сохраненные данные обратно в поле множественного выбора, установив соответствующие флажки.

Плагин multiselect имеет метод loadOptions, но с помощью этого метода мне нужно сгенерировать все данные опций с именем опции, значением опции и статусом проверки и установить его для плагина multiselect. Как я могу легко это сделать, если у меня есть массив данных, который необходимо проверить / выбрать в плагине множественного выбора?

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.

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете использовать функцию 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>
...