自动检查 jQuery 多选中保存的数据

Question

我正在使用这个 jQuery Multiselect 插件 https://github.com/nobleclem/jQuery-MultiSelect 将我所有启用了 multiple 属性的 select 框转换为带有复选框的下拉框. 我从数据库中加载 select 框中的选项。提交表单后，我可以保存多个 selected 数据，但是当我从数据库中检索数据时，我无法通过选中匹配的复选框将保存的数据显示回多个 select 框中。

multiselect 插件有一个 loadOptions 方法，但使用该方法我必须生成所有选项数据，包括选项名称、选项值和检查状态，并将其设置为 multi select 插件。如果我在多个 select 插件中有一个必须是 checked/selected 的数据数组，我怎么能轻松地做到这一点？

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（我有多个select盒子，如下图启动）

$.each($("select[multiple]"), function (key, selectbox) {
    $("#" + selectbox.id).multiselect({
        texts: {placeholder: $("#" + selectbox.id).attr("title")}
    });
});

我保存的数据数组是[1,3,4] 我需要将这些保存的数据设置到 select 框并选中复选框，而无需通过 loadOptions 方法。

Answer 1

您可以在 select options 上使用 jQuery .filter() 功能在初始化 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>

自动检查 jQuery 多选中保存的数据

Auto check saved data in jQuery Multiselect

html

javascript

jquery

multi-select

bootstrap-multiselect