jQuery append添加option时data-GST属性语法错误的解决咨询

嘿，这个问题我之前踩过坑！你遇到的「Unexpected token -」错误，根源是JavaScript对象字面量的语法规则：当属性名包含连字符（-）这类特殊字符时，不能直接裸写，必须把属性名用引号（单引号或双引号）包裹起来。

你原来的代码里，data-GST: '1'会被JS引擎误解析成data - GST（也就是变量data减去变量GST），这显然不是你想要的，所以才会抛出语法错误。

正确的写法 #

只需要把带连字符的属性名用引号括起来，同时注意对象属性之间的逗号分隔（你原代码里class: 'ucwords'后面少了逗号，这也是潜在问题）：

$('#Sub_categories').append($("<option/>", { 
  value: element['ID'], 
  text: element['English_name'].toLowerCase(), 
  class: 'ucwords',
  'data-GST': '1'  // 用单引号包裹带连字符的属性名
}));

额外说明 #

如果你的属性名是合法的JavaScript标识符（比如没有特殊字符、不是保留关键字），可以直接裸写；但像data-*这类HTML自定义属性，因为包含连字符，必须用引号包裹属性名才能被JS正确识别。

另外，如果你后续需要修改这个data属性，也可以用jQuery的.data()方法，比如：

// 给已创建的option设置data-GST
$('#Sub_categories option:last').data('gst', '1');
// 获取data-GST的值
$('#Sub_categories option:last').data('gst');

不过在创建元素时直接在对象里设置带引号的属性名，是最直接的方式。

内容的提问来源于stack exchange，提问作者shah rushabh