How to get the id of the option clicked on multiple select?-CodePudding

If I have the following select:

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

How can I get the id of the clicked option element?

If I use this:

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

It doesn't work, because it returns the top most id.

In my example, if I click option One and then I shift-click option Two (select multiple), the id would be 1 because it's the top most selected option, but I need only the id of the option that was clicked on

Edit Added snippet

$("#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>

CodePudding user response：

Select the options that are checked and loop over to get all of the ids.

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>

Seeing what the use selected is comparing what you had before and what you have now.

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>

CodePudding user response：

Try this out:

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

CodePudding user response：

Here you can try this logic :

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>