javascript - 在 jQuery Multiselect 中自动检查保存的数据

Question

我正在使用这个 jQuery Multiselect 插件 https://github.com/nobleclem/jQuery-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 方法。

Answer 1

您可以使用 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>