Attach data to HTML nodes

Question

This question has been asked before, but most of the answers revolve around HTML5.

My DOCTYPE is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I need to attach data (phone dialling code) to option values of a select:

<select id="id_creditCardCountry"> <option value="ax">Aland Islands - AX</option> <option value="al">Albania - AL</option> <option value="dz">Algeria - DZ</option><!--e.g. Attach dial code "(+213)" --> <option value="as">American Samoa - AS</option> <option value="ad">Andorra - AD</option> <option value="ai">Anguilla - AI</option> etc

There seem to be numerous ways to accomplish this. I need to find the best one (by best I mean most cross browser and efficient).

The jQuery "data" function http://docs.jquery.com/Core/data -- if this is the best method, can anyone give guidance of how to use in this instance?
Set data based on element ID - This involves having to give an id to every option in the select.
Further suggestions?

may be this can help you out <stackoverflow.com/questions/4564659/…> — Darshan
– Darshan, Commented Apr 18, 2013 at 10:15

Joe · Accepted Answer · 2013-04-18 11:19:28Z

You could use:

$("#id_creditCardCountry option[value='ax']").data("dial-code", "+213");

If you have a JS array of all the countries and dial codes then you could loop through them all:

for(var i = 1; i <= countryArray.length; i++){ $("#id_creditCardCountry option[value='"+countryArray[i]+"']").data("dial-code", ""+dialCodeArray[i]+""); }

However, this may be something to consider doing server side if you're already outputting a list of countries. For example:

<option value="ax" data-dial="+213">Aland Islands - AX</option>

Collectives™ on Stack Overflow

Attach data to HTML nodes

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related