将数据附加到HTML节点

时间:2013-04-18 10:12:06

标签: javascript jquery html

之前已经提出过这个问题,但大多数答案都围绕着HTML5。

我的DOCTYPE是:

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

我需要将数据(电话拨号代码)附加到选择的选项值:

<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

似乎有很多方法可以实现这一目标。我需要找到最好的一个(最好的,我的意思是大多数跨浏览器和高效)。

  • jQuery“data”函数http://docs.jquery.com/Core/data - 如果这是最好的方法,那么任何人都可以指导如何在这个实例中使用吗?
  • 根据元素ID设置数据 - 这需要为select中的每个选项提供id。
  • 进一步的建议?

1 个答案:

答案 0 :(得分:1)

您可以使用:

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

如果你有一个包含所有国家和拨号代码的JS数组,那么你可以循环遍历它们:

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

但是,如果您已经输出了国家/地区列表,则可能需要考虑执行服务器端。例如:

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