8

I just wonder if is it posible to have option elements in html with data- attributes and so, if that posible how to retrive this value.

More specific. Lets say I have the following code:

<select name="areas" id="areas">
    <option value="1" data-lat="12.243" data-lng="32.43242">Area name</option>
    <option value="2" data-lat="14.243" data-lng="34.43242">Area name</option>
    <option value="3" data-lat="16.243" data-lng="36.43242">Area name</option>
    <option value="4" data-lat="18.243" data-lng="38.43242">Area name</option>
</select>

then, is it any way to get the data-lat and data-lng for from the selected option via jQuery ?

Improve this question
3
  • 1
    Yes it is possible, and you'd retrieve it's value just like you would any other attribute, with the .attr method. Commented Oct 4, 2013 at 17:08
  • @KevinB - Wouldn't using .data('lat') and .data('lng') be more appropriate? Commented Oct 4, 2013 at 17:12
  • It's Gelocation data, it might not need to be a number therefore .attr could more appropriate. It just depends on what you're going to DO with the data once you get it. Commented Oct 4, 2013 at 17:13

4 Answers 4

Reset to default
7

Yes that's possible. Any attribute value can be get by:

$('option:selected').attr('data-lng')

and set by:

$('option:selected').attr('data-lng', 1234);
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Why option:eq(0) ? I do not need the value from the first one but from the selected one
@MerianosNikos then select the selected one. the concept is the same.
perfect solution. I dont even know why they use onchange event instead of attributes like this?!
5

Set attribute using setAttribute:

document.getElementById('areas')
    .getElementsByTagName('option')[index]
    .setAttribute('data-lng', 'foo');

Get attribute using getAttribute:

document.getElementById('areas')
    .getElementsByTagName('option')[index]
    .getAttribute('data-lng');

Both get and set:

var el = document.getElementById('areas')
    .getElementsByTagName('option')[index];
el.getAttribute('data-lng');
el.setAttribute('data-lng', 'foo');

Note 1 I have used document.getElementById('areas').getElementsByTagName('option')[index] because probably is more cross-browser, but you could use

  • document.getElementById('areas').getElementsByTagName('option')[index]
  • document.getElementById('areas').options[index]
  • document.getElementById('areas')[index]

Note 2 I have used setAttribute and getAttribute because they are more cross-browser, but you could also use dataset:

el.dataset.lng;            // get
el.dataset.lng = 'foo';    // set
Improve this answer

Comments

2

You can use .data to retrieve data attributes from elements

$('#areas options').each(function(){
    console.log($(this).data('lat'), $(this).data('lng'));
}

The advantage of this over .attr is this is that you get type conversion so you'll get a Numeric value in this case rather than a string.

Improve this answer

Comments

2

I'd like to add, If you want to target a specific <select>

You can also pass the container element so that <options> from only that element will be selected.

// For user with events like .on("change") etc.
console.log($("option:selected", this).attr("data-lat"));

OR

console.log($("option:selected", "#areas").attr("data-lat"));
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.