The value show in the multi-select function not properly

I have 2 problems in the multi-select function:

i)The first problem, I set the value if clicked the Show Volvo and Opel and Show Volvo and Saav buttons, will follow the value shown in the multi-select box. Now the error is if clicked the Show Volvo and Opel button, it can show the correct values, but if clicked the Show Volvo and Saav button, the value cannot show properly.

ii)The second problem, if I clicked the Show Volvo and Opel, it just can show the checked value in the multi-select box, the value of name cannot show in the multi-select box, for example, I need to show name Volvo, Opel like below this picture:

Below is my sample working coding:

$(document).ready(function(){
     $('#cars').multiselect({
      nonSelectedText: 'Choose the car',
      enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
      buttonWidth:'100%'
     });
    });
  
  

function sendFunc(){
$(this).prop('checked',false);
  var cars = [];
  var cars = ["volvo", "opel"];

for(var i = 0; i < cars.length;i++) {
    $(':checkbox[value="'+cars[i]+'"]').prop('checked', 'checked');
}
  }
  
function sendFunc_2(){
$(this).prop('checked',false);
  var cars = [];
  var cars = ["volvo", "saab"];

for(var i = 0; i < cars.length;i++) {
    $(':checkbox[value="'+cars[i]+'"]').prop('checked', 'checked');
}
  }

<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="cars" value="" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<br><br><br>
<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Volvo and Opel</button>
<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc_2()">Show Volvo and Saav</button>

Hope someone can guide me on how to solve this problem.

Answer

You can iterate through options inside your select-box and where value matches set prop('selected', true); and then use $('#cars').multiselect('refresh') to refresh your mutliselect .

Demo Code :

$(document).ready(function() {
  $('#cars').multiselect({
    nonSelectedText: 'Choose the car',
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    buttonWidth: '100%'
  });
});



function sendFunc() {
  call_to_deleselect();
  var cars = ["volvo", "opel"];
  call_to_set_Selected(cars)
}

function sendFunc_2() {
  call_to_deleselect();
  var cars = ["volvo", "saab"];
  call_to_set_Selected(cars)
}

function call_to_deleselect() {
  //remove all selected
  $('option', $('#cars')).each(function(element) {
    $(this).removeAttr('selected').prop('selected', false);
  });
}

function call_to_set_Selected(cars) {
  for (var i = 0; i < cars.length; i++) {
    //add option selected
    $('option[value="' + cars[i] + '"]', $('#cars')).prop('selected', true);
  }
  //or use  $('#cars').multiselect('select',cars);
  //refresh mutlislect
  $('#cars').multiselect('refresh');
}

<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="cars" value="" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<br><br><br>
<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Volvo and Opel</button>
<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc_2()">Show Volvo and Saav</button>