Select2 用 JS 选择选项答案

【问题标题】：Select2 select option with JSSelect2 用 JS 选择选项
【发布时间】：2021-07-30 07:42:00
【问题描述】：

<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>

这是我的 select2 Multi-select 列表。

我需要根据 ajax 成功响应从列表中选择一些选项。

ajax成功响应中的代码如下：

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'});
  }                     
}                
},

但它不起作用。有没有人可以帮忙啊

提前致谢

【问题讨论】：

标签： javascript jquery-select2

【解决方案1】：

您需要通过相应的id 或class 选择您的选择框。在您的情况下，它是 mul-select-gift 类，然后像这样使用 val 和 trigger('change')：

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

这是工作示例：

$(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>

【讨论】：