Show selected option id

[Mr.M]

Hi DW, I'm trying to get selected option id, the problem with my code is that it is only showing or returning the id of the first select only even if I click other options it doesn't return them.
Heres my code

var xid = $('#managsel option:selected').attr('id');
alert("The id is: " + xid);

Here is my select option code NB: The code is generated by php.

<select class="form-control select2" style="width: 100%;" id="managsel">
<option selected="selected">Select Department</option>
<option id="opa">Accountant</option>
<option id="opb">Training</option>
<option id="opc">Operations</option>
<option id="opd">IT</option>
</select>

Also note that the options id are generated dynamically and I don't know them beforehand.
Thank you.

[ohmyposh]

The code listens for a change event on a <select> element and displays the value (ID) of the selected option in a paragraph. It updates dynamically when the user selects a different option.

[Mr.M]

What I mean is that I have a table that is dynamically generated with and each record generate the same select as you can see above.

Now the problem is that the code only work with the first table record select, from the table.

[Mr.M]

I have many select with the same id and I need to get their options id when that particular select is changed.

The code that I have only work or gets one select and does not work on the rest of the selects except the first one.

I've also tried using a query select all but that doesn't even work with the first one as well.

[Mr.M]

I've managed to use an alternative, instead of this approach I've changed and used a function call onChange="Myfunction(this);" and I then reference to the dom element returned to get it option selected id.

It is now working accordingly.

[gediminas.bukauskas.7]

Multi-select would have multiple attribute <select ... multiple>. An example of retrieving all selected values is provided on site "https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box". Read answer #85.

[Amonza]

I understand that the original poster has marked this as solved. However, I will leave this here as it provides a more fexible and decoupled method to achieve the desired outcome.

const selectElement = document.getElementById('managsel');

selectElement.addEventListener('change', function() {
  const xId = this.options[this.selectedIndex].id;
  console.log(xId); // Output: id of the selected option
});

[Biiim]

Normally you would use the value property as well, I have actually never seen the id attribute being used like that before.

<select class="form-control select2" style="width: 100%;" id="managsel">
<option value="" SELECTED>Select Department</option>
<option value="opa">Accountant</option>
<option value="opb">Training</option>
<option value="opc">Operations</option>
<option value="opd">IT</option>
</select>

and then in vanilla JS just use something like console.log(document.getElementById('managsel').value);.

I think its .value, I normally use jQuery where it is $('#managsel').val();

Also on this post:

I have many select with the same id and I need to get their options id when that particular select is changed.
The code that I have only work or gets one select and does not work on the rest of the selects except the first one.
I've also tried using a query select all but that doesn't even work with the first one as well.

That is a mis-use of the ID attribute, an ID is always a unique element on the page, hence why javascript will only find the first one. If you have many select's you want to group together use a class instead ie:

<select class="form-1-input form-control select2" id="input1"></select>
<select class="form-1-input form-control select2" id="input2"></select>
<select class="form-1-input form-control select2" id="input3"></select>
<select class="form-1-input form-control select2" id="input4"></select>

Then use console.log(document.getElementsByClassName('form-1-input'));
or console.log($('.form-1-input'));

it will return an array of them.

[Mr.M]

Just to indicate I've managed to work around this, and what I'm using is working 100%.

There's a reason why it uses the same id's that's because it is dynamically generated and I have almost 5 or 6 GROUPS of classes so I can't use the class grouping on this but was looking for something similar but instead of using classes I wanted to use id's.
But the approach I'm using is perfect as it uses this approach to get the element in question and find the closest tr then find the id from it.

This approach works perfect and it doesn't interfere with any other tables on other sections.

Also just to mention, the site is a one page that dynamically load elements without refreshing.

So thanks to everyone commenting but I've solved this issue.

[Biiim]

Just to indicate I've managed to work around this, and what I'm using is working 100%.

There's a reason why it uses the same id's that's because it is dynamically generated and I have almost 5 or 6 GROUPS of classes so I can't use the class grouping on this but was looking for something similar but instead of using classes I wanted to use id's.
But the approach I'm using is perfect as it uses this approach to get the element in question and find the closest tr then find the id from it.

This approach works perfect and it doesn't interfere with any other tables on other sections.

If its working then there is no point fixing something that doesn't need to be fixed!

If you need to modify it in the future watch out for the clashing ID attributes. You can only have 1 unique ID in the DOM so Javascript won't be able to access the following ID's that have exactly the same name.

Usually in a loop you just make an increment or use the unique ID from the table the row entry comes from eg: id="order_{$order_num}" or id="order_'+row.order_num+'" kinda thing. could also just do a unique increment like var i = 0; and i++; in the loop then just add i to the id attribute.

Im guessing you accessed the parent element and found all its children that way so your code would still work the same if you only put the id attribute on one of them.

You can have as many classes as you want eg: class="form-control mygroup1 mygroup5" but for ID specifically only 1 of them can exist in terms of javascript code