引导多选搜索栏中的默认值选择未显示答案

【问题标题】：default value selection in bootstrap multiselect search bar not showing引导多选搜索栏中的默认值选择未显示
【发布时间】：2021-08-16 15:22:06
【问题描述】：

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

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

当我在引导多选搜索栏中使用默认值选择时没有显示

演示https://jsfiddle.net/xctpL8am/2/

如果我没有在drop-down 中使用$('#example-getting-started').multiselect('select', ['1', '3'],{....}); 搜索栏不显示。

如果在显示的drop-down 搜索栏中使用$('#example-getting-started').multiselect({....});。

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

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

【问题讨论】：

标签： javascript html jquery multi-select bootstrap-multiselect

【解决方案1】：

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

documentation 建议您应该在对象上初始化插件，然后在单独的调用中设置选定的选项 - 请参阅上一个链接中的 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>

【讨论】：