JQuery Bootstrap Multiselect plugin for selected value

Question

I am using the JQuery Bootstrap Multiselect plugin to do the multiple select in the input. Now I am facing the problem which is if I want to set default value 2,3 (Peter, Jane) in the multi-select function when I've clicked the 'Show Option' button, then the value not show in the input field.

Below is I want the expected result:

Below is my coding that I've tried:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />


<select id="ahli_ahli" class="selectpicker" multiple data-live-search="true">
  <option value="1">John</option>
  <option value="2">Peter</option>
  <option value="3">Jane</option>
</select><br><br><br>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="show()">Show Option</button>
<script>
$(document).ready(function(){
     $('#ahli_ahli').multiselect({
      nonSelectedText: 'Pilih ahli-ahli',
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      buttonWidth:'100%'
     });
    });

function show(){
    var data="2,3";
  var dataarray=data.split(",");
  $("#ahli_ahli").val(dataarray);
 // console.log(dataarray);
}
</script>

I've used below this method, but it cannot work.

function show(){
    var data="2,3";
  var dataarray=data.split(",");
  $("#ahli_ahli").val(dataarray);
}

Hope someone can guide me on how to solve it. Thanks.

Answer 1

You can simply add selected attribute in specific option field. and refresh the multiselect

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />


<select id="ahli_ahli" class="selectpicker" multiple data-live-search="true">
  <option value="1">John</option>
  <option value="2">Peter</option>
  <option value="3">Jane</option>
</select><br><br><br>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="show()">Show Option</button>
<script>
$(document).ready(function(){
     $('#ahli_ahli').multiselect({
      nonSelectedText: 'Pilih ahli-ahli',
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      buttonWidth:'100%'
     });
    });

function show(){ 
  var selValues = $('#ahli_ahli').val(); 
  selValues.push("2")
  selValues.push("3"); 
  $("#ahli_ahli").multiselect("select",selValues);
     
}
</script>