如何在 jquery 中自动选择多个选项？答案

【问题标题】：How to select multiple option automatically in jquery?如何在 jquery 中自动选择多个选项？
【发布时间】：2021-08-07 07:52:45
【问题描述】：

我正在使用多选选择器。我想自动选择 ajax 响应选项。

我有这种形式的数据

tuesday,wednesday,Thursday

这是一个选择器

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

这是有数据的变量

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

如何在 jquery 的帮助下自动选择变量中的那些选项？

【问题讨论】：

标签： javascript jquery select jquery-plugins bootstrap-selectpicker

【解决方案1】：

您可以使用.split(",") 将它们转换为数组，然后使用selectpicker('val', operation_day.split(",")) 设置值，最后刷新您的选择器。

演示代码：

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>

【讨论】：

【解决方案2】：

您可以将数组传递给多个选择，如下所示。

var operation_day = "tuesday,wednesday,thursday" //editData.attr('data-operation_day');
var arr = operation_day.split(',');
$(".kt-selectpicker").val(arr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>

注意：它区分大小写。 thursday 不等于 Thursday。

【讨论】：