Select2 使用 JS 选择选项

Question

<div class="row justify-content-center align-items-center h-300">
   <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
      <div class="form-group">
         <select class="mul-select-gift" multiple="true">
            <?php 
               if(mysqli_num_rows($prolist_res11) > 0 ){
                                                                                 
                   while($row = mysqli_fetch_assoc($prolist_res11)){ ?>  
            <option value="<?php echo $row['proid'];?>"> <?php echo $row['proname'];?> </option>
            <?php
               }                   
             }
          ?>
         </select>
      </div>
   </div>
</div>

This is my select2 Multi-select list.

I need to select some options from the list based on ajax success response.

Code inside ajax success response is mentioned below:

success: function(data) {                
  if(type == 'q_dis') {                    
  var msg   = $.parseJSON(data);                         
  var product_or_catagory = msg.product_or_catagory;                        
  var id_string = msg.id_string;
  const ids = id_string.split("_sx_");
  var sid = ids[0];
  var dtail_string =  msg.dtail_string;
  if(product_or_catagory == 'prod' ) {
    document.getElementById('product_list').style.display = 'block';
    $('#mul-select-gift').val(sid).trigger('change')                            
    // $('#mul-select-quantity').select2('data', {id: 1127, text: 'Blue_Grass'});
  }                     
}                
},

But it is not working. Can anyone help, please

Thanks in advance

Answer 1

You need select your select box by the corresponding id or class . In your case it is mul-select-gift class and then use val and trigger('change') like this:

$('.mul-select-gift').val(["val1" , "val2"]).trigger('change') 

Here is working sample:

 $(document).ready(function () { $('.mul-select-gift').select2({ width: '200px' }); }); function select() { $('.mul-select-gift').val(["AL2" , "AL3"]).trigger('change') }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <div class="row justify-content-center align-items-center h-300"> <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3"> <div class="form-group"> <select class="mul-select-gift" multiple="multiple"> <option value="AL1">Al1</option> <option value="AL2">Al2</option> <option value="AL3">Al3</option> <option value="AL4">Al4</option> <option value="AL5">Al5</option> </select> </div> </div> <button onclick="select()">click to select AL2 and AL3</button> </div>