如何获取多选时点击的选项的id？答案

【问题标题】：How to get the id of the option clicked on multiple select?如何获取多选时点击的选项的id？
【发布时间】：2022-11-18 01:38:48
【问题描述】：

如果我有以下选择：

<select id="multi_select" multiple>
    <option id="1" value="one">One</option>
    <option id="2" value="two">Two</option>
    <option id="3" value="three">Three</option>
    <option id="4" value="four">Four</option>
    <option id="5" value="five">Five</option>
</select>

如何获取单击的选项元素的 id？

如果我使用这个：

$("#multi_select").on('change', function () {
    let id = this.options[this.selectedIndex].id;
});

它不起作用，因为它返回最上面的id。

在我的示例中，如果我单击选项一，然后按住 Shift 键单击选项二（选择多个），则 id 将是 1，因为它是选择最多的选项，但我只需要该选项的 id被点击的

编辑添加了 sn-p

$("#multi_select").on('change', function() {
  let id = this.options[this.selectedIndex].id;
  console.log(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="multi_select" multiple>
        <option id="1" value="one">One</option>
        <option id="2" value="two">Two</option>
        <option id="3" value="three">Three</option>
        <option id="4" value="four">Four</option>
        <option id="5" value="five">Five</option>
</select>

【问题讨论】：

因此，您将需要遍历所有选项并查看它是否被选中。
@freedomn-m 确保你选择了多个，不仅仅是点击它们，还添加了更多选项
@B.DLiroy 是的，这应该是问题中的相关内容。 “单击选项二”不同于“按住 Shift 键单击选项 2”。
您需要使用 click 事件或保留自上次 change 以来的值记录并进行比较。
stackoverflow.com/a/42887557/2181514

标签： javascript jquery

【解决方案1】：

选择选中的选项并循环获取所有 ID。

document.querySelector("#multi_select").addEventListener("change", (evt) => {
  const selectedIds = [...evt.target.querySelectorAll('option:checked')].map(({
    id
  }) => id);
  console.log(selectedIds);
});


/*
document.querySelector("#multi_select").addEventListener("change", function(evt) {
  const selectedIds = Array.from(evt.target.querySelectorAll('option:checked')).map(function(opt) {
    return opt.id
  });
  console.log(selectedIds);
});
*/

<select id="multi_select" multiple>
  <option id="1" value="one">One</option>
  <option id="2" value="two">Two</option>
</select>

查看选择的用途是比较您以前拥有的和现在拥有的。

document.querySelector("#multi_select").addEventListener("change", (evt) => {
  
  const prevIds = JSON.parse(evt.target.dataset.prevSelectedIds || '[]');
  
  const selectedIds = [...evt.target.querySelectorAll('option:checked')].map(({
    id
  }) => id);
  
  evt.target.dataset.prevSelectedIds = JSON.stringify(selectedIds);
  
  // find out the new selection)
  if (selectedIds.length > prevIds.length) {
    const newlySelected = selectedIds.filter(id => !prevIds.includes(id))
    console.log("added", newlySelected);
  } else {
    // this is showing what is now selected
    console.log("selected", selectedIds);

   // You can do a reverse of the if to see what is not there
   const newlyUnselected = prevIds.filter(id => !selectedIds.includes(id))
   console.log("unselected", newlyUnselected);

  }
});

<select id="multi_select" multiple>
  <option id="1" value="one">One</option>
  <option id="2" value="two">Two</option>
</select>

【讨论】：

它给出了所有被选中的 id，但是如何获得被点击的那个呢？
这将需要您了解之前选择的内容并查看有何不同。我现在很忙，所以我无法写出那个答案。
哦耶！好吧，那我可以做到
当他们取消选择时，应该发生什么？选择了 1 和 2，他们取消单击 2，因此只选择了 1。显示什么？
没有办法真正知道这一点。这是假设。

【解决方案2】：

试试这个：

$("#multi_select").change(function() {
  var id = $(this).children(":selected").attr("id");
});

【讨论】：

【解决方案3】：

在这里你可以试试这个逻辑：

let selectedOpt = [];
      function check(ev) {
        for (let item of ev.target.options) {
          if (item.selected) {
            selectedOpt.push(item);
          }
        }

        // here we got finally selected options
        console.log(selectedOpt);

        //here array iteration can be done
        for (let opt of selectedOpt) {
          console.log(opt.id, opt.value);
        }
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select onchange="check(event)" multiple>
      <option id="1" value="one">One</option>
      <option id="2" value="two">Two</option>
      <option id="3" value="three">three</option>
      <option id="4" value="four">four</option>
      <option id="5" value="five">five</option>
    </select>

   
  </body>
</html>

【讨论】：