JavaScript returning NULL/Undefined when trying to get a data attribute

Question

I have been trying to get the values stored inside a data attribute called data-title, however JavaScript doesn't display the value I have stored inside it. Been trying to put the value inside alert for testing, but it doesn't work. The following is my piece of code. Thank you.

<select id='item_ID' onchange='changeValue();'>
    <option data-title="Title 1">1</option>
    <option data-title="Title 2">2</option>
    <option data-title="Title 3">3</option>
    <option data-title="Title 4">4</option>
</select>

<script type="text/javascript">

function changeValue(){

    var option=document.getElementById('item_ID');
    alert(option.getAttribute('data-title'));
}
</script>

VtoCorleone · Accepted Answer · 2014-03-10 22:49:15Z

3

The select element doesn't have a data-title attribute. The option elements do.

answered Mar 10, 2014 at 22:49

VtoCorleone

17.2k5 gold badges40 silver badges52 bronze badges

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

Comments

ktm5124 · Accepted Answer · 2014-03-10 22:49:07Z

2

That's because your select element doesn't have a data-title attribute. Only the option elements have them.

Here's a working example:

var options = document.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
    var title = options[i].getAttribute("data-title");
    alert(title);
}

http://jsfiddle.net/E49hm/

answered Mar 10, 2014 at 22:49

ktm5124

12.2k23 gold badges86 silver badges130 bronze badges

2 Comments

Jordan Over a year ago

Sorry, don't understand what you mean. My elements have a data-title as you can see above

ktm5124 Over a year ago

@Jordan I wrote <select> and <option> but without the backticks, so StackOverflow whited it out. See my updated answer

David Thomas · Accepted Answer · 2014-03-11 02:31:41Z

1

To retrieve the data-title value from the currently-selected option, as your select element itself is lacking that attribute:

function changeValue(){
    var select = document.getElementById('item_ID'),
        option = select.getElementsByTagName('option')[select.selectedIndex];
    alert(option.getAttribute('data-title'));
}

edited Mar 11, 2014 at 2:31

answered Mar 10, 2014 at 22:53

David Thomas

254k53 gold badges382 silver badges421 bronze badges

1 Comment

Jordan Over a year ago

thank you very much, your answer was correct, thanks so much, will accept it in a second. Hugs

C B · Accepted Answer · 2014-03-10 22:52:23Z

0

You want: option.value

<select id='item_ID' onchange='changeValue();'>
    <option data-title="Title 1">1</option>
    <option data-title="Title 2">2</option>
    <option data-title="Title 3">3</option>
    <option data-title="Title 4">4</option>
</select>

<script type="text/javascript">

function changeValue(){
    var option=document.getElementById('item_ID'); 
    console.log(option.value);
}
</script>

answered Mar 10, 2014 at 22:52

C B

13.4k5 gold badges39 silver badges48 bronze badges

Collectives™ on Stack Overflow

JavaScript returning NULL/Undefined when trying to get a data attribute

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related