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:

1. onClick to get the ID of the clicked button
2. https://www.geeksforgeeks.org/how-to-get-selected-value-in-dropdown-list-using-javascript/
3. 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!

Answer 1

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>