Adding attribute to HTML tags to stock data for JS manipulation

I building a country selection drop down that, on select, populates a city drop down.

Due to my code i need to retrieve after country selection the corresponding ISO code and unique country ID, and i would rather not query the DB again for that. So i was thinking stocking this data within the tag, with something like this :

<option rel='US' someother-attribut开发者_StackOverflowe="1" >United States</option>

Would there be any other more straight forward way to do that ? If not what attributes could i use without impact on my HTML output.

HTML5 data attributes would be the way to go

Setting the data in the mark-up

HTML Mark-Up

<input id="foo" data-code="12376213jkh132kjh3" />

Reading the value on the client

JavaScript

var code = document.getElementById("foo").getAttribute("data-code");

I do not see the jQuery tag, but just in case it would be

jQuery

var code = $("#foo").data("code");