javascript - 在多重选择中，我需要能够获取当前所选选项的值

Question

编辑:我想我让你们对我需要的东西感到困惑。如果我选择 val1，我需要函数返回 val1。如果我随后选择 val2，且 val1 仍被选为多重选择的一部分，则我需要返回 val2。然后我可以使用这些值来设置重新创建的输入的 id 和名称。

我有一个包含 multiple="multiple"的选择列表

我想创建一个与每个选定选项关联的文本输入，并根据每个新选定选项的值设置新输入的 id 和名称，但我总是从 onchange 事件中获取第一项的值。不是第一个值，而是第一个选定的值。因此，如果我先选择 val2，则会返回该值，但如果我先选择 val1，然后选择 val2，则 id 和名称将与选择 val1 时相同。

 <select id="multiSelect" multiple="multiple">
  <option value="val1">Value 1</option>      
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
 </select>

我使用了以下函数，它返回第一个值。

 $("#multiSelect").on('change', function(evt, params) {
   alert($("option:selected", this).val());

 });

这将返回第一个选定的选项。如果我选择第二个选项，我仍然会得到第一个值。我需要获取所选选项的值。

提前致谢。

Answer 1

解决方法是保存以前选择的元素并将它们与新选择的元素进行比较:

let selectedOptions = [];

$("#multiSelect").on("change", function() {
  const newSelectedOptions = $(this).val() || [];
  const addedOptions = newSelectedOptions.filter(option => !selectedOptions.includes(option));
  const removedOptions = selectedOptions.filter(option => !newSelectedOptions.includes(option));
  selectedOptions = newSelectedOptions;
  console.log("addedOptions", addedOptions);
  console.log("removedOptions", removedOptions);
});

<select id="multiSelect" multiple="multiple">
  <option value="value_1">Value 1</option>
  <option value="value_2">Value 2</option>
  <option value="value_3">Value 3</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>