javascripthtmljquerymulti-selectbootstrap-multiselect

default value selection in bootstrap multiselect search bar not showing

This question already asked, but it is not solve my issue

Am tying to use Bootstrap Multiselect in my project.

When I use default value selection in bootstrap multiselect search bar not showing

demo https://jsfiddle.net/xctpL8am/2/

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.

I want to show search bar with default value selection.

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

Solution

  • The issue is because the constructor syntax you're using for the library is incorrect; you cannot initialise the library and set the selected options at the same time.

    The documentation suggests that you should initialise the plugin on your object and then set the selected options in a separate call - see the select method in the previous link.

    Using this method means that the Search box is displayed correctly:

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