Set value in the multiple select input with javascript

Question

I have problem to set multiple values in the multiple select input. For example I need to set value 2,3 (Ketchup, Relish) in the multi-select input when I've clicked the Show Selected Option button, then the value will show in the input field.

Below is I want the expected result:

Below is my coding that I've tried, I've used this method $('.selectpicker').val(value); but it cannot work.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>



<select class="selectpicker" value="" multiple data-live-search="true">
  <option value="1">Mustard</option>
  <option value="2">Ketchup</option>
  <option value="3">Relish</option>
</select>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Selected Option</button>
<script>
$('select').selectpicker();

function sendFunc(){
    var value = "2,3";
    $('.selectpicker').val(value);
}
</script>

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

ProEvilz · Accepted Answer · 2021-04-19 04:44:15Z

Please read the documentation for selecting items with programmatically with code. They have made it extremely clear on how to do this.

...From the docs linked above:

You can set the selected value by calling the val method on the element. $('.selectpicker').selectpicker('val', ['Mustard','Relish']);

Key think to notice here is that the values are an array, not a string.

Calling .val() directly like in your code works differently to the above - you should read on further on the docs page to understand the difference compared to .selectpicker('val').

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>



<select class="selectpicker" value="" multiple data-live-search="true">
  <option value="1">Mustard</option>
  <option value="2">Ketchup</option>
  <option value="3">Relish</option>
</select>


<button type="button" class="btn btn-sm btn-primary create-permission" id="btn_save" value="Save" onclick="sendFunc()">Show Selected Option</button>
<script>
$('select').selectpicker();

function sendFunc(){
    var value = [2,3];
    $('.selectpicker').selectpicker('val',value);
}
</script>

Collectives™ on Stack Overflow

Set value in the multiple select input with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related