javascript - 推送多选的数据值 只推送第一个点击的选项多次

Question

我在使用 Javascript 时遇到了一个问题。我有多个 select我想要选择的所有数据类型，然后将其推送到数组。但是我陷入了选择数据的第一步。它只选择第一个选项，然后当我单击另一个选项时，它会再次推送相同的第一个值。

这是我的代码:

<select  multiple  id="boox" name="box[]" class="selectpicker form-control" data-live-search="true"  data-size="4"  required> 
    <option value="1" data-type="11">item 1 </option>
    <option value="2" data-type="22">item 2 </option>
    <option value="3" data-type="33">item 3 </option>
    <option value="4" data-type="44">item 4 </option>
</select>

我的 Javascript 代码:

var options = [];
$('#box').change(function() {
    options.push($('#box').find("option:selected").data("type"));
    console.log(options);
});

例如，如果我选择第 2 项，它会在控制台中返回:

22

然后如果我点击第 3 项，它会返回:

22,22

我希望有人能澄清我做错了什么。我会很感激的!

Answer 1

基本上，您需要遍历所有选定的选项并将值推送到您的选项数组。在下面的代码中，我使用 jQuery each()函数循环遍历所有选定的选项并将它们的值存储在选项数组中:

var options =[];
 $('#box').change(function(){
  options =[];
  $('#box').find("option:selected").each(function(){
    options.push($(this).data("type"));
  })
  console.log(options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  multiple  id="box" name="box[]" class="selectpicker form-control" data-live-search="true"  data-size="4"  required> 
<option value="1" data-type="11">item 1 </option>
<option value="2" data-type="22">item 2 </option>
<option value="3" data-type="33">item 3 </option>
<option value="4" data-type="44">item 4 </option>
</select>