How to return the ID of an option element on click?

Question

I've been researching a lot of different methods to try and return the the ID of various elements, options of a list to start, but none of them either seem to be what i'm looking for nor do the ones I choose work. Is it possible to do without reply clicks so that I can just pull the ID of a list item and pare the HTML down while also making it easier to add to?

My javascript:

          function selectOption() {
            let selectedValue = dropdown.options[dropdown.selectedIndex].text;
            selectedValue.addEventListener('click', function() {
              let uniqueID = e.target.getAttribute('id');
              alert(uniqueID);

The id's which I am trying to return:

          <select id = "dropdown" onchange = "selectOption()">
            <option>Select to scroll to an image</option>
            <option>Grounded</option>
            <option id = "Lain">Lain</option>
            <option id="Unfinished">Unfinished Character</option>

Other things i've tried: Returning the id with an embedded on-click function call

          function reply_click(clicked_id)
          {
              alert(clicked_id);
          }

<option id="free" onClick="replyClick(this.id)">Free</option>
<option id="basic" onClick="replyClick(this.id)">Basic</option>
<option id="premium" onClick="replyClick(this.id)">Premium</option>

returning a value by selecting the children of a parent element, specified by ID, then updating some HTML to reflect the returned value

      document.addEventListener('DOMContentLoaded', function getOption() {
          selectElement = document.querySelector('#select1');
          selectElement.addEventListener('click', returnElement() {
            output = selectElement.value;
            document.querySelector('.output').textContent = output;

<select id="select1">
   <option value="free">Free</option>
   <option value="basic">Basic</option>
   <option value="premium">Premium</option>
</select>

Sources:

onClick to get the ID of the clicked button
https://www.geeksforgeeks.org/how-to-get-selected-value-in-dropdown-list-using-javascript/
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute (the source of the code in the actual post)

EDIT: The solutions below DO WORK, my browser just happened to have a broken console!

You likely have an error in your console that `e is not defined`; you need to define the event as `e ` in your function: `selectedValue.addEventListener('click', function(e) {` — mykaf, Jul 23 '23 at 19:04

Rory McCrossan · Accepted Answer · 2023-07-23T20:04:55.693

2

To get the id of the selected option you can get the first item in the selectedOptions array of the parent select and read its id property:

document.querySelector('#dropdown').addEventListener('change', e => {
  const selectedOptions = e.target.selectedOptions;
  console.log(selectedOptions[0].id);
});

<select id="dropdown">
  <option>Select to scroll to an image</option>
  <option id="Grounded">Grounded</option>
  <option id="Lain">Lain</option>
  <option id="Unfinished">Unfinished Character</option>
</select>

Edit - Given your issues outlined in the comments below, here's a version of the above using anonymous functions:

document.querySelector('#dropdown').addEventListener('change', function(e) {
  const selectedOptions = e.target.selectedOptions;
  console.log(selectedOptions[0].id);
});

<select id="dropdown">
  <option>Select to scroll to an image</option>
  <option id="Grounded">Grounded</option>
  <option id="Lain">Lain</option>
  <option id="Unfinished">Unfinished Character</option>
</select>

edited Jul 23 '23 at 20:04

answered Jul 23 '23 at 19:08

Rory McCrossan

331,213
40
305
339

What browser/environment are you using? If it's old/outdated it's possible it doesn't support arrow functions. I'll add a version using anonymous functions. If that still doesn't work for you then you would need to edit the question to include the updated code you've tried. – Rory McCrossan Jul 23 '23 at 20:04
I am using firefox, and yes the console on it seems to be incredibly buggy. This solution does work! So huge props for being patient and working with me, i've been bashing my head against problem for days. Going to take a much needed break and plan the rest of my webpage and how I will be integrating this into an auto-scroll function. Just gonna have to check my return values the old-fashion way the next time I wanna do something like this (or find a good extension for VScode) – Agatha Fordyce Jul 23 '23 at 20:44

How to return the ID of an option element on click?

1 Answers1