bootstrap 多选搜索栏中的默认值选择未显示

Question

这个问题已经问过了，但没有解决我的问题

我想在我的项目中使用 Bootstrap Multiselect。

当我在 bootstrap 多选搜索栏中使用默认值选择时未显示

If am not using $('#example-getting-started').multiselect('select', ['1', '3'],{....}); in drop-down search bar not showing.

If am using $('#example-getting-started').multiselect({....}); in drop-down search bar showing.

我想显示带有默认值选择的搜索栏。

$(document).ready(function() {
    $('#example-getting-started').multiselect('select', ['1', '3'],{
      includeSelectAllOption: false,
      enableFiltering: true,
      includeFilterClearBtn: true,
      enableCaseInsensitiveFiltering : true
    });
  });

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/css/prettify.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/js/prettify.js"></script>


<select id="example-getting-started" multiple="multiple">
   <option value="1">Sunday</option>
    <option value="2">Monday</option>
    <option value="3">Tuesday</option>
    <option value="4">Wednesday</option>
    <option value="5">Thursday</option>
    <option value="6">Friday</option>
    <option value="7">Saturday</option>
</select>

Answer 1

问题是因为您为库使用的构造函数语法不正确；您不能同时初始化库和设置所选选项。

documentation 建议您应该在您的对象上初始化插件，然后在单独的调用中设置选定的选项 - 请参阅前面 link 中的 select 方法。

使用此方法表示搜索框显示正确：

$(document).ready(function() {
  let $select = $('#example-getting-started').multiselect({
    includeSelectAllOption: false,
    enableFiltering: true,
    includeFilterClearBtn: true,
    enableCaseInsensitiveFiltering: true
  });

  $select.multiselect('select', ['1', '3']);
});

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/css/prettify.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/js/prettify.js"></script>


<select id="example-getting-started" multiple="multiple">
  <option value="1">Sunday</option>
  <option value="2">Monday</option>
  <option value="3">Tuesday</option>
  <option value="4">Wednesday</option>
  <option value="5">Thursday</option>
  <option value="6">Friday</option>
  <option value="7">Saturday</option>
</select>

bootstrap 多选搜索栏中的默认值选择未显示

default value selection in bootstrap multiselect search bar not showing

html

javascript

jquery

multi-select

bootstrap-multiselect