1

我正在使用这个 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方法。

4

1 回答 1

2

您可以在初始化插件之前使用 jQuery.filter()函数来预先选择所需的那些。select optionsmultiselect

这里，

$('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>

于 2018-05-02T12:51:57.693 回答