html - how to get custom attribute of option tag in dropdown?

Question

If I have this code:

 <select onchange="alert('?');" name="myname" class="myclass">      <option isred="-1" value="hi">click</option>  </select> 

How can I get the value '-1' from the custom attribute isred ? I don't want to use the value property. And I dont want to target the option tag by a name or id.

I want something like onchange="alert(this.getselectedoptionID.getAttribute('isred'));"

Can anyone help?

Also I don't want to use jquery.

Answer 1

You need to figure out what the selectedIndex is, then getAttribute from that options[] Array.

<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass">      <option isred="-1" value="hi">click</option>     <option isred="-5" value="hi">click</option> </select>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

jsFiddle DEMO

As a side note:

Don't use inline javascript in your HTML. You want to separate your business logic from your UI. Create a javascript event handlers instead to handle this. (jQuery / Angular / etc)

Answer 2

in jquery, you can just write:

$("#myname").find(':selected').attr('isred');