javascript - 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)