Get Selected attribute value in vanilla javascript

Question

I want to use Vanilla JS instead of the below jQuery code to get the attribute value of the selection.

$("#PartnerTypeID").find(':selected').attr('data-id');

How is this possible?

document.getElementById("PartnerTypeID").addEventListener("change", function() {
  console.log(this.getAttribute("data-id"))
});

<select id="PartnerTypeID" name="PartnerTypeID" placeholder="Select...">
  <option value="">Select...</option>
  <option data-id="hospitals" value="1">Hospital</option>
  <option data-id="daycare" value="2">Daycare</option>
</select>

Chase · Accepted Answer · 2021-05-05 08:00:38Z

3

You're setting an event listener on the select, which means that this refers to that select element itself. Which doesn't have the attribute you're looking for, instead you need to get the option element that was selected and extract the attribute from there instead.

document.getElementById("PartnerTypeID").addEventListener("change", function() {
  console.log(this.options[this.selectedIndex].getAttribute("data-id"));
});

<select id="PartnerTypeID" name="PartnerTypeID" placeholder="Select...">
  <option value="">Select...</option>
  <option data-id="hospitals" value="1">Hospital</option>
  <option data-id="daycare" value="2">Daycare</option>
</select>

The .options property gives you back all the options for the select element, and the .selectedIndex property gives you the index of the option currently selected.

answered May 5, 2021 at 8:00

Chase

5,6552 gold badges21 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bekim Bacaj · Accepted Answer · 2021-05-05 11:48:58Z

0

PartnerTypeID.onchange = function(){
console.log(this[this.selectedIndex].getAttribute('data-id')) 
}

<select id="PartnerTypeID" placeholder="Select...">
  <option value="">Select...</option>
  <option data-id="hospitals" value="1">Hospital</option>
  <option data-id="daycare" value="2">Daycare</option>
</select>

This used to work with this[ this.selectedIndex ].attribute[ 'data-id' ], but for some highly ignorant reason - it no longer does!

answered May 5, 2021 at 11:48

Bekim Bacaj

6,0152 gold badges27 silver badges26 bronze badges

Collectives™ on Stack Overflow

Get Selected attribute value in vanilla javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related