如何在jquery中自动select多个选项？

Question

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

我有这种形式的数据

tuesday,wednesday,Thursday

这里有一个 select 选择器

<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 的帮助下自动 select 那些可变的选项？

Answer 1

您可以像下面这样传递数组进行多项选择。

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.

Answer 2

您可以使用 .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>

如何在jquery中自动select多个选项？

How to select multiple option automatically in jquery?

javascript

jquery

select

jquery-plugins

bootstrap-selectpicker