javascriptjqueryselectjquery-pluginsbootstrap-selectpicker

How to select multiple option automatically in jquery?

I am using multi-select picker. I want to automatically select options on ajax response.

I have data in this form

tuesday,wednesday,Thursday

here is a select picker

<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
                                    <option value="monday" >Monday</option>
                                    <option value="tuesday">Tuesday</option>
                                    <option value="wednesday" >Wednesday</option>
                                    <option value="thursday" >Thursday</option>
                                    <option value="friday">Friday</option>
                                    <option value="saturday" >Saturday</option>
                                    <option value="sunday" >Sunday</option>
</select>

this is the variable which is having data

var operation_day = editData.attr('data-operation_day');

How i can automatically select those option which are in variable with help of jquery?

Solution

  • You can use .split(",") to convert them in array and then set value using selectpicker('val', operation_day.split(",")) lastly refresh your selectpicker.

    Demo Code :

    var operation_day = "tuesday,wednesday,thursday";
console.log(operation_day.split(","))
$('select').selectpicker('val', operation_day.split(",")); //split them and set value
$('select').selectpicker('refresh') //refresh ..selectpicker
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
  <option value="monday">Monday</option>
  <option value="tuesday">Tuesday</option>
  <option value="wednesday">Wednesday</option>
  <option value="thursday">Thursday</option>
  <option value="friday">Friday</option>
  <option value="saturday">Saturday</option>
  <option value="sunday">Sunday</option>
</select>