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.

possible duplicate of [How do you get the currently selected — Felix Kling, Aug 14 '12 at 17:37

Mark Pieszak - Trilon.io · Accepted Answer · 2016-05-11T20:22:28.753

84

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)

edited May 11 '16 at 20:22

answered Aug 14 '12 at 17:38

Mark Pieszak - Trilon.io

61,391
14
82
96

@Mark Pieszak, Imagine I have this code: `` What better way do you suggest instead of inline onchange declaration? I want values to be passed in as parameters! Thanks in Advance! – sbsatter May 27 '17 at 06:46
@ShahedBinSatter Set up the change event in the javascript – Mark Pieszak - Trilon.io May 29 '17 at 16:06
How do I pass the values (this.value and this.getAttribute('code')) as parameters? – sbsatter May 30 '17 at 03:59
`onchange="myFunc(this.value, this.getAttribute('code'))"` with "myFunc" being a `function myFunc(val, code) { /* do something */ }` in your actual JS code. Ideally don't even use the `onchange` method, and setup that onchange method in the JS itself, but that's a separate concept, but you can look that up online and see how it's done! Hope that helps. Cheers – Mark Pieszak - Trilon.io May 30 '17 at 15:02

score 32 · Answer 2 · edited Nov 12 '13 at 14:05

32

in jquery, you can just write:

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

edited Nov 12 '13 at 14:05

bensiu

24,660
56
77
117

answered Nov 12 '13 at 13:45

Bernard

465
4
3

3

OP says explicitly that s/he doesn't want to use jQuery. – mdml Nov 12 '13 at 14:07
7

Glad you wrote it, because it helped me :) – MojoDK Jan 18 '15 at 13:57
Exactly what I wanted. – TheLegendaryCopyCoder Sep 03 '18 at 11:04
This should have been marked as the Correct answer – Karue Benson Karue Aug 03 '21 at 14:25

score 8 · Answer 3 · answered Aug 14 '12 at 17:38

8

Use something like this:

document.getElementById("x").onchange = function () {
    console.log(this.options[this.selectedIndex].getAttribute("isred"));
};

answered Aug 14 '12 at 17:38

Anthony Mills

8,676
4
32
51

What if I want to get a custom attribute when the form is being submitted? – Dijiflex Nov 30 '20 at 16:48

score 5 · Answer 4 · answered May 03 '19 at 09:38

//Pure Javascript solution, and elegant one check if you really want to leverage the power of javascript.

// Listening to a onchange event by ID attached with the select tag.
document.getElementById("name_your_id").onchange = function(event) {

//event.target.selectedOptions[0] have that option. as this is single selection by dropdown. this will always be 0th index :) 
let get_val = event.target.selectedOptions[0].getAttribute("isred");
console.log("Value from the Attribute: ", get_val)
}

 <select id="name_your_id" name="myname" class="myclass">
    <option isred="423423" value="hi">One</option>
    <option isred="-1" value="hi">Two</option>
 </select>

score 3 · Answer 5 · edited Jul 02 '15 at 03:49

3

Assuming we have a HTML markup as below:

<form id="frm_">
    <select name="Veh">
        <option value='-1' selected='selected'>Select</option>
        <option value='0' ren='x'>xxx</option>
        <option value='1' ren='y'>yyy</option>
    </select>
</form>

The attr "ren" can be accessed like this:

function getRep() {
    var ren = document.forms['frm_'].elements['Veh'].options[document.forms['frm_']
                 .elements['Veh'].selectedIndex].getAttribute('ren');
    console.log("Val of ren " + ren); //x or y
}

Demo

edited Jul 02 '15 at 03:49

Shubh

6,693
9
48
83

answered Jul 01 '15 at 21:51

walter

41
1

1

the code provided by you had errors which needs to be addressed before you post it for others to use. Your answer would be more helpful if you post your important piece of code with the answer rather than user's navigating to your jsfiddle link. As of now I have done it on behalf of you. – Shubh Jul 02 '15 at 04:12

GitaarLAB · Answer 6 · 2012-08-14T17:41:44.563

1

You use: .getAttribute('isred')

You want:

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

edited Aug 14 '12 at 17:41

answered Aug 14 '12 at 17:35

GitaarLAB

14,536
11
60
80

do you mean like onchange="alert(.getAttribute('isred'));" ? – omega Aug 14 '12 at 17:37

score -1 · Answer 7 · edited Oct 05 '13 at 07:06

-1

you can

$(".myclass").val(function(){alert($("option",this).attr("isred"));})

edited Oct 05 '13 at 07:06

Chintan Khetiya

15,962
9
47
85

answered Oct 05 '13 at 06:28

Saintush Kumar

11
2

1

This always alerts the value of the first option's (as opposed to the selected one) isred attribute, it deselects the selected option, and the question says **not** to use jQuery. – Quentin Oct 05 '13 at 06:33

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

7 Answers7

As a side note:

Linked

Related